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ABSTRACT 


This study aimed to develop and implement an official website for Cjzave 
BBQ and Grill. It employed the descriptive research design using the simple 
random technique and participated by 17 respondents consisting of (10) 
customers, (5) employees and (2) web developers. 

Using the ISO 2510:2011 standard, evaluation showed that the web-based 
system was highly acceptable with the total weighted mean of 4.68. It functionality 
at 4.74 (Highly Acceptable), efficiency at 4.65 (Highly Acceptable), compatibility 
at 4.65 (Highly Acceptable), usability at 4.67 (Highly Acceptable), maintainability 
at 4.68 (Highly Acceptable), portability at 4.65 (Highly Acceptable), and reliability 
at 4.65 (Highly Acceptable) and security at 4.67 (Highly Acceptable). The Cjzave 
BBQ and Grill official website has proved to be effective in improving the 
restaurant's current system as it provided the customers a platform to explore, 
order, and inquire online about the restaurant and provided the owners better 
online payment, inventory, and sales management. 

Although it was concluded that Cjzave BBQ & GRILL Korean Style Buffet 
may rely on the web-based system in this modern age as it brought positive 
impact on management and customer growth, the following inclusions in the 
website are still recommended for its better performance and efficacy: (1) a 


reservation form and list for dine-in customers (2) poster of possible rewards (e.g. 


coupons) in the home page of the website to attract more customers (3) sales 
generator feature to automatically sum all records of orders daily and lastly, (4) 
provision of verification to improve the security of the account of the customers 


upon registration. 
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CHAPTER I 


PROJECT AND ITS BACKGROUND 


This chapter presents the project context which contains the rationale, the 
purpose and description, the objective of the study, the significance of the study 
which enumerates the beneficiaries of the study and the corresponding benefits 
each will receive; lastly, the scope and limitation wherein the researchers 


determined the coverage of the study. 


PROJECT CONTEXT 

In today's world, the place where most people go to is the internet, 
specifically in using search engines like Google, Yahoo, or Bing. The Internet 
covers so many things whether you want to look up something, discover and 
explore. The internet has turned our existence upside down. It has revolutionized 
communications to the extent that it is now our preferred medium of everyday 
communication (Dentzel, 2014). Website is a platform where you can order food 
and purchase any product online, post about your own self, and share pictures 
over instant messaging. 


A website is a collection of publicly accessible, interlinked web pages that 


share a single domain name. It can be created and maintained by an individual, 
group, business, or organization to serve a variety of purposes. 

Websites come in a nearly endless variety, including educational sites, sports 
sites, news sites, business websites, social media sites, and so on. This study is 
under business websites, which mainly focuses on the official website of a specific 
restaurant, which gives you the opportunity to market your business online and 
allows you to show the identity of your business on the internet. There are many 
reasons why a business might want to be visible on the internet, including public 
perception of its size, sophistication, modernity, connectedness, customer service 
reliability, and typically to encourage inquiries from potential customers or 
partners. The official website for restaurants is designed to allow customers to 
view their menus online, read up on them, order food online, and even pay through 


an online gateway. 


PURPOSE AND DESCRIPTION 

In almost 5 years of living in the pandemic up until today, many business 
owners closed their businesses due to bankruptcy. People are forced to stay at 
home. You can only see a few people outside. Everyone is scared to catch the 
virus. Switching from this kind of situation gave people a hard time. Without 


customers, a restaurant's business status is rapidly decreasing due to lack of 


profit. Bills are increasing, products prices are increasing, and almost everything 
has doubled its price just to cope and survive their businesses. 

Online food ordering has become popular during the pandemic. You can view, 
order, or even pay without going to the actual store. Having this kind of system, it 
helped many business owners and customers. 

The phenomenon of the Korean Wave is sweeping across the world with 
tremendous force, driven by The South Korean cultural industry exports to foreign 
audiences its popular entertainment, music, TV shows, and global market. As a 
result of this, Korean cuisine is capturing more attention in recent times. Among 
the various types of Korean cuisine, one that stands out and is frequently depicted 
in Korean dramas and movies is Korean BBQ, locally known as "gogi-gui." This 
term refers to the Korean culinary practice of grilling meats like beef, chicken, or 
pork on gas or charcoal grills, right at the dining table. These meat dishes can be 
prepared in numerous ways, whether marinated or not. One of the most iconic 
forms of Korean BBQ is Bulgogi, which involves marinating thinly sliced beef 
sirloins or tenderloin cuts. Another beloved dish within Korean BBQ culture is 
Galbi. 

There are a lot of Korean Style BBQs all over the world but the Cjzave BBQ & 
GRILL is the first Korean Style Buffet here in Bicol. It was established on 


November 20, 2014, located at Zone 15 Magsaysay Avenue, Naga City. Cjzave 


BBQ & GRILL Korean Style Buffet was owned by Mr. Allan Francis O. Alano. The 
name of the restaurant was his wife's idea. The word "Cjzave" comes from the 
name of their three children Cj, Zander and Xavier. The target customers of this 
business were teenagers who love Korean foods, senior citizens, etc. With this 
Korean Style Buffet they can bring Korean delicacies to each Filipino who loves 
to eat dishes like this and at an affordable price. 

Since Cjzave BBQ & GRILL Korean Style Buffet was offering this kind of food, 
they have their own Facebook page that serves as an online platform to help meet 
the needs of the customers when it comes to food ordering, inquiries etc. 
However, the restaurant doesn't have an existing website where the customer can 
explore more. The customers can only contact them through their official 
Facebook page and walk-in. 

The proponents proposed a system to help the restaurant widen its target 
audience, which can help them grow. The project is called "Cjzave BBQ & GRILL 
Official Website." It is a web-based system wherein the customers can explore, 
order, and inquire online about the restaurant. This website also features online 
payment, inventory, and sales management, which will be much easier for the 
staff. Logging in as an admin, the staff/any employee can have the access to 
monitor everything. As for the customers, they can visit the website without 


logging in, but their personal information (such as email) will be collected for them 


to place an order and also for the staffs to accommodate them easily and properly. 


This system will be effective to improve the restaurant's current system. 


The proponents observed the restaurant and came up with the following 
problems: 
1. What is Cjzave BBQ & GRILL current process in terms of; 
a. Online Ordering 
e Delivery 
b. Inventory and Sales Management 
c. Mode of Payment 
2. How does the existing procedure does affect the daily productivity at 
Cjzave BBQ & GRILL? 
3. How could the proposed system aid and create a better process for the 
restaurant especially for the official website of Cjzave BBQ & GRILL? 
4. What are the impacts of Official website on the costumers? How does it 


affect day-to-day life of the customers? 


When it comes to the customer needs and follow-up of orders at the Korean 


Style Buffet, the situation here has following reasons behind this: 


Facebook as the only platform — they have no existing official website for 
their Korean Style Buffet. Even though they have their official Facebook 


page, it is not enough to entertain and give the needs of the customers. 


Lack of marketing techniques — the customer was unable to browse and 


purchase the products online. 


Conflict of additional orders — there has been instances to have a conflict 
on the additional orders because of the limited stocks and deliveries of the 


raw food within the restaurant. 


OBJECTIVE OF THE STUDY 


The general objective of Cjzave BBQ & GRILL Korean Style Buffet is to 
develop and implement an official website that would help the administration, 
staffs and customers to lessen the problems that they are encountering due to the 
existing process. 


To accomplish the general objective, the researcher's goal is to: 


e Developed an official website of Cjzave BBQ & GRILL that will help the 
restaurant to be more productive and to lessen the workloads of the 
employees. 

e Provide an efficient way of monitoring the sales and inventory records. 

e Make an official website so that the customers can purchase/order 
products, and pays through online payment. 

e Educate the customers and be aware about the possible impacts of Cjzave 


BBQ and GRILL Official Website into their daily lives. 


SIGNIFICANCE OF THE STUDY 


This study's significance will be very beneficial to the following: 


Customers - this study will help the customers to be familiarized and able to know 
more about Cjzave BBQ and GRILL Korean Style Buffet. 

Service Crews - this study will help the crew/staffs of the restaurant to lessen 
their workloads. Especially when it comes to inventory of management and sales, 
food ordering and online payment. 

Owner - this study will help the owner to manage the restaurant easily. 
Researchers and Developers - this study will give the researcher more 
significance and will able to help us in honing our skills in system planning and 
development. This will also aid to show their talents, skills, and expertise in 
computer programming. 

Future Researchers - this study will benefit the future researcher as references 
and motivation to conduct more research studies and invent to help our next 


generation. 


SCOPE AND LIMITATIONS 


This research study involves the process of the system to create an Official 
Website of Cjzave BBQ & GRILL and replace the manual process of the 
restaurant that includes online ordering, products and services inquiries, online 
payment and uploading of payment method, inventory and sales management, 
and customer's records. 

The proposed system is intended and limited only to Cjzave BBQ & 


GRILL management, employees, and customers in Naga City. 


CHAPTER II 
REVIEW OF RELATED LITERATURE AND STUDY 
This chapter includes the ideas, finished thesis, generalization or 
conclusions, methodologies, and others. Those that were included in this chapter 


helped familiarize information that are relevant and similar to the present study. 


FOREIGN LITERATURE 

Andreea Dobrila (2019), if more businesses understood the advantages of 
having a website for a restaurant, they wouldn't think twice about choosing 
designs that include profitable features like online ordering, menus, online 
reservations, and reviews in social media. 

This article talks about the different advantages of having a website for a 
restaurant. It says that restaurant owners need to understand the competitive 
advantage of restaurant websites, and how they can build sites without any 
technical knowledge. In making a website it is important to know first why 
customers need it. Websites from local restaurants aren't solely concerned with 
informing people. A website can also help you broaden your company's reach and 
develop a larger consumer base. According to this article, your website provides 
a common ground for all of your promotions. Your website needs to have an active 


presence on social media. Your Twitter, Instagram, Facebook, and other accounts 


10 


exist in different spaces, though. A person following you on Facebook may never 
see your Instagram posts. 

T.DEEPA (2018) This online ordering system is primarily designed for 
usage in the food delivery industry. Hotels and restaurants will be able to expand 
their online food ordering businesses through this system. The customers will be 
able select food items from the menu in just a few minutes. Modern food industries 
make it possible to deliver products to customers' homes quickly and easily. The 
orders are then processed by restaurant workers using a graphical interface that 
is simple to use and easy to find so that they can be delivered to the customer's 
location. 

Nowadays, people can order food online for delivery or takeout from a 
nearby restaurant or food cooperative. Numerous opportunities are emerging on 
the web or in mobile applications these days due to the rapid growth of internet 
use and associated technologies. The use of an electronic payment system 
makes this feasible. The customer's credit or debit card, gcash or any other 
transactions can be used to make the payment. Anyone can place an online order 
for anything they want and have it delivered to their home. The economics is the 
key tool to this digital cash in terms of processing consumer connection that are 
promoted by all internet transaction types. Rather than storing data on each food 


ordering transaction, you can also connect them all. The system will become an 
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important tool for restaurants to use to improve management. In addition, it has 
the potential to increase the restaurant's efficiency by shortening the amount of 
time it takes to complete a task, reducing the number of delivery-related human 
errors, and providing customers with high-quality service. It is possible to draw 
the conclusion that the provided system is a suitable option due to its reliability 
and availability. 

Jack Collison (2020) The fast expansion of internet food delivery services 
has thrown a wrench into the typically offline restaurant industry. The crowding- 
out effects and market expansions caused by the staggered arrival of online food 
delivery services are examined empirically in this study. According to the 
difference-in-differences technique, 30-50 cents of every dollar spent on online 
meal delivery services is incremental, while the rest is diverted away from brick- 
and-mortar sales. These findings are statistically significant at the zip code level 
and are varied across different forms of expenditure, implying that the level of 
replacement is driven by convenience and pre-existing spending habits. Year-to- 
year analysis indicates that there is a growing level of cannibalization of brick- 
and-mortar restaurant sales. Back-of-the-envelope estimates suggest that 
restaurant revenues have increased but profitability has decreased. A classic 
illustration of how e-commerce is upending a traditional business is online food 


delivery. The total number of transactions and revenue for the emerging industry 
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have grown quickly due to the sudden popularity of new food delivery businesses. 
Online food delivery services is a significant revenue streams, it is also a risk of 
cannibalizing brick-and-mortar sales as customers who formerly purchased in- 
store to migrate online shopping to a large extent online shopping behavior. The 
purpose of this research is to assess the degrees of substitution between in- 
person restaurant sales and online meal delivery services in order to determine 
the effects of these enterprises’ introduction—and subsequent hybridization—on 
restaurant sales. 

L.Taek Chai et.al., (2019) Online food delivery (OFD) it is a new services 
in Malaysia that is growing according to the food and beverage sector. Online 
meal ordering is the new dining out. This study implies that the evolving urban 
consumer could be responsible for the rise of online food delivery services. 
Studies that address the contributing elements towards OFD services among 
urbanites are relatively rare, despite the significance and changing consumer 
behavior towards OFD services in Malaysia. As a result, the purpose of this study 
is to develop an integrated model that analyzes the relationships between 
numerous antecedents. (Users mentioned simplicity of use, time savings, and so 
on) with the behavioral goal of convenience, motivation, privacy, and security. 
Based on the results of this study, it was revealed that time saving orientation 


(TSO), convenience motivation (CM), and privacy and security (PS) have positive 
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effects on OFD service behavioral intention (Bl). The findings give crucial insights 
for OFD service providers and scholars on what motivates urbanites to use OFD 
services. 

Dr. Mitali Gupta (2019). The convenience of ordering food from a 
smartphone app or application program has alienated some market share from 
Asian country's trusted 'kirana' or mom-and-pop stores. This has had an impact 
on in-restaurant brick-and-mortar forms but the nutrition business in the Asian 
country is still in unorganized. Given the rate at which the organized sector is 
rapidly increasing, it is only a matter of time and a much larger piece of global 
investments before a significant impact is formed on in progress eating house 
enterprises that do not have their own delivery-focused style. 

Online food ordering is really in demand. It allows customers to place 
orders more conveniently, allowing them to explore their menu options and spend 
more. This is a great way for restaurants to stay competitive and attract 
customers. The most essential thing that will always need to connect the quality 
of boosting online food ordering ever is to keep the customer as a frequent 
customer, in the sense of providing good quality and quantity of food, maintaining 
time, and delivering as soon as possible. This will provide you the best results for 


your online meal ordering system. 
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LOCAL LITERATURE 

According to Adriatico et. al (2022) Adriatico et. al. ab (2022) Customers in 
the foodservice business rank not just the quality of the product, but also the 
quality of service they receive during their eating experience. As a result, when 
customers place a high value on the intellectual and motivational parts of the 
dining experience, they are more likely to recommend the restaurant to others. 
The purpose of this study was to evaluate the levels of service quality and client 
satisfaction at two leading fast-casual dining establishments in the Philippine 
province of Nueva Vizcaya. This study was conducted as a correlation study with 
395 randomly selected consumers using a modified SERVQUAL instrument. To 
describe the levels of service quality and customer happiness, the weighted mean 
was employed. The fast-casual dining restaurants had satisfied the expectations 
of their customers, since they were deemed to provide reasonable service quality. 
The fast-casual eating businesses had satisfied their consumers in terms of dining 
experience. Consumer happiness is influenced by the physical design and 
appearance of the restaurants, the price of the product, and the response of the 
employees. 

According to Lea Nerdelita L. Baylen (2020) The study aimed to determine 
the effectiveness of the inventory management system that resulted in a decrease 


in profit of the randomly selected small-sized restaurants in the four districts of 
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Quezon province, in order to provide suggestions and solutions to the problems 
that they face in their day-to-day operations. In order to collect data for this 
descriptive study, quantitative and qualitative methods were used. A survey was 
distributed to restaurant employees, and an interview was conducted with 
restaurant owners. In the analysis and interpretation of the collected data, 
weighted mean, frequency, and percentage were used. 

Abasolo (2021) The operating techniques of internet meal delivery 
enterprises in Camarines Norte, Philippines, it is reported. It evaluated the profile 
of online food delivery businesses in terms of number of riders, initial 
capitalization, form of business organization, commonly used digital platform, and 
average weekly deliveries; operational strategies being implemented, and 
resource and process problems encountered. According to the findings, the 
majority of online food delivery services have 11 to 15 riders, are sole 
proprietorships, use a social media platform, and have 201 or more weekly 
deliveries. Monitoring rider performance, usage of cellular phones, desktop, 
tablet, and laptop for monitoring consumer wants; optimizing marketing budget 
through use of low-cost marketing campaigns and promotions are among the 
operational techniques of online food delivery enterprises. Promotion via various 
social media platforms; and periodic updates to customers on their purchases via 


chat or Short Message Service (SMS). The issues that internet meal delivery 
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services face are a lack of available riders during peak hours and the prospect of 
new entrants. According to the survey, food delivery business owners should 
evaluate their human resource plans and produce an operations manual to 
provide clear instructions and practices for implementing their operational 
strategies that are important to their everyday operations. 

As per Christy O. Gamilla (2021) One of our favorite pastimes is dining out 
at our favorite restaurants. It can be a chance for us to interact with others, try 
new foods, and celebrate important events with family and friends. Although dine- 
in is temporarily closed as a precautionary step against the COVID-19 virus, they 
can still offer take-out or delivery so that people can order their favorite comfort 
cuisine and eat at home. The new coronavirus's health problem has forced 
millions of people to stay at home, unable to go outside for fear of contracting the 
virus, and this is when food delivery demand has risen to prominence. The global 
online meal delivery market is expected to reach $151.5 billion in sales and 1.6 
billion consumers by 2021, according to StockApps.com. Within the next three 
years, it is expected to reach over two billion people worldwide. Customers used 
online meal delivery as an alternative to purchasing in stores and restaurants. 
Online meal delivery is keeping the food industry alive by preventing food 
businesses from closing down. 


According to Louella D. Desiderio (2018). The Philippine Star published an 
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article titled Businesses advised to use the Internet to push wares. It demonstrates 
that businesses should use the Internet to promote their products and services, 
since more consumers go online to study before making purchases. Companies 
should consider employing online marketing for the items and services they 
provide, since more and more individuals use the Internet to study goods before 
purchasing them. It also adds that in the Philippines, the study found that 
approximately 70% of buyers conduct internet research before making offline 
purchases. This development demonstrates the possibility for expanding the firm 
by going online. It is relevant to the research since it informs businesses that 
online advertising is extremely effective. It also demonstrates that whether small 
or large organizations, they may simply reap the benefits of internet marketing by 
reaching users at a moment when they are relevant anywhere in the local study. 

Baylen, L. N. L. (2020) The study aimed to determine the effectiveness of 
the inventory management system that resulted in a decrease in profit of the 
randomly selected small-sized restaurants in the four districts of Quezon province, 
in order to provide suggestions and solutions to the problems that they face in 
their day-to-day operations. In order to collect data for this descriptive study, 
quantitative and qualitative methods were used. A survey was distributed to 
restaurant employees, and an interview was conducted with restaurant owners. 


In the analysis and interpretation of the collected data, weighted mean, frequency, 
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and percentage were used. 

Andal et al., (2022) The rapid rise of internet food delivery services has had 
considerable impact on the traditional offline restaurant industry. Ordering food 
has become a simple and comfortable habit with the click of a mouse. The rise 
and popularity of manufacturing food through online means has become a 
common phenomenon due to the internet being a very effective medium for 
sharing ideas and information. The emergence of advanced online food ordering 
systems has changed restaurant dining culture and established a new global 
standard of convenience for individuals worldwide. The primary purpose of this 
research is to investigate the positive and negative effects of online food delivery 
services on customers. Our descriptive research design produced informative 
data, demonstrating that food delivery services can have a substantial impact on 
consumers' daily lives. This study was conducted in Lipa City, Batangas, and the 
findings indicate that convenience and other important aspects inspire people to 
buy food online on a regular basis. 

As of 2021, the company employs a manual approach to manage sales 
and inventories, a method outlined by Roy Megapatan. This current inventory 
system has presented the company with several challenges related to monitoring 
and stock checking. KONEK.COM's management has expressed their 


perspective on this matter, stating that the manual method proves to be both 
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cumbersome and time-consuming for inventory management. This approach is 
prone to errors, particularly when dealing with substantial data sets, and it has 
been known to disrupt critical transactions. 

In response to these concerns, the researchers have undertaken the task of 
designing a system that would provide the management with a more organized 
and streamlined method of inventory recording. The objective is to generate 
automatic reports detailing the store's current inventory or available stock. This 
implementation aims to eliminate the difficulties and errors associated with 
managing vast amounts of data manually. Additionally, this system is anticipated 
to reduce the workload on the management and the time required for inventory- 


related tasks. 


FOREIGN STUDIES 

Amit Shankar et.al.,(2022) The objective of this study is to conduct a 
comprehensive review of existing literature on the topic of online food delivery. 
This review encompasses the theories, contexts, methods, and analytical 
techniques used in online food delivery research. The findings of this review 
suggest that the focus of online food delivery research has shifted from website- 
based delivery to mobile application-based and drone-based delivery. 


Additionally, based on this synthesis of literature, a conceptual framework has 
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been developed to highlight the frequently discussed antecedents, mediators, 
moderators, and consequences of this domain. Furthermore, the review sheds 
light on research areas that have been overlooked, thereby proposing some 
insightful directions for future research. This review is a noteworthy addition to the 
hospitality literature, specifically to the food delivery literature, clarifying and 
expanding on the current body of knowledge in this area. 

Int. J. Financial Stud. (2022) Turkey's e-commerce sector is rapidly 
expanding, with the country leading the world in monthly mobile purchases. The 
goal of this research is to look at the factors that influence the adoption of online 
payment methods among the customers of a Turkish bank, particularly in the 
context of the COVID-19 outbreak. The study extends the technology acceptance 
model (TAM) by examining the impact of 11 distinct factors on key outcomes such 
as attitude, behavioral intention, and real-world usage. 

The study's findings emphasize the significance of these components in 
determining both attitude and behavioral intention. Elements such as relative 
advantage, perceived trust, perceived usefulness, personal innovativeness, 
perceived integrity, perceived ease of use, and health and epidemic-related 
considerations, as well as income level, private-sector employment, and self- 
employment, all have a positive correlation with the practical use of online 


payment systems. On the contrary, perceived risk and age are deterrents to using 
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online payment methods. 

Abhishek Singh1 et al. (2018) The food industry has consistently proven to 
be a lucrative sector, benefiting not only manufacturers and suppliers, but also 
end-users and distributors. The present landscape, marked by industry shifts and 
an increasing reliance on the internet, underscores the necessity for an online 
food delivery system. To address these demands, we propose the development 
of a real-time online food ordering system catering to customer needs. 

This system aims to surmount the limitations and drawbacks of traditional 
queuing mechanisms prevalent in the industry. By leveraging our application, 
customers can seamlessly order food online from both restaurants and mess 
services, aligning with the evolving trends. Our solution also enhances the 
process of taking food orders from customers, ushering in an improved 
experience. 

The heart of our proposed system revolves around an online food menu, 
affording customers the convenience of placing orders according to their 
preferences. Moreover, our system equips users with a user-friendly tracking 
mechanism, enabling them to effortlessly monitor their orders. A noteworthy 
feature entails the incorporation of a feedback system, allowing users to rate the 
food items they've experienced. This rating system also serves as a foundation 


for recommending restaurants and mess services to new customers, facilitating 
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informed choices. To ensure initial ease of use, our system adopts a pay-on- 
delivery payment system. Additionally, for heightened security during the ordering 
process, we maintain separate user accounts, each safeguarded by a unique ID 
and password combination. 

Bee Abdul Aleem (2018) The core vision of the retail business is to achieve 
maximum profits by fostering customer satisfaction and loyalty through 
personalized services. However, the delicate nature of the retail industry makes it 
susceptible to losing potential customers if the store fails to maintain adequate 
inventory levels. Consequently, this study identifies inventory-related challenges 
within Rahmath Store, an established retail outlet in Taman Maju. A pivotal issue 
plaguing the store is the absence of a robust inventory control system, which 
hampers the effective management and tracking of sales and inventory levels. 

To address these challenges, the paper proposes the implementation of a 
Sale & Inventory Management System, replacing the outdated manual processes. 
This project aims to introduce an advanced system with heightened flexibility and 
functionality tailored to the store's requirements. The primary goal of this system 
is to enhance the efficiency of goods management within the store. 

In pursuit of these objectives, the project's scope will encompass critical 
aspects such as database management, automated report generation, quality 


control (QA) procedures, and the point-of-sale process. Moreover, the 
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development of this system will be grounded in an offline or window-based 
framework, aligning with the store's operational preferences. 

W.B.A.C. Piyatissa (2020) Matara Kema, situated near the Godagama 
expressway interchange in Matara, is a restaurant that currently caters to a 
substantial daily customer influx. The restaurant's reputation has been steadily 
growing due to its strategic location and top-notch food quality. Despite its small 
scale, Matara Kema provides an extensive range of services. However, as the 
customer base continues to expand, managing operations manually becomes 
increasingly challenging. To overcome this hurdle, the restaurant is poised to 
transition to a computerized solution to streamline and enhance its efficiency. 

The proposed system is a response to this need for operational 
optimization. It empowers Matara Kema to handle its flourishing customer base 
effectively, even with limited staff. This computerized solution aligns well with the 
current trend towards online platforms. Notably, the system facilitates swift 
navigation of online menus by customers, enabling them to place orders promptly. 
Similarly, the restaurant staff benefits from an organized view of incoming orders, 
thereby reducing potential miscommunications. The graphical interfaces 
embedded within the system prove to be efficient and user-friendly for both 
customers and restaurant staff. 


Particularly advantageous for managers and owners, the system 
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incorporates a reporting module that presents essential insights into the 
business's requirements. The development of this system adheres to the MVC 
(Model View Controller) architecture, utilizing object-oriented methodologies to 
ensure a cohesive approach. The analysis and design phases involved Uniform 
Resource Modeling. The website itself is developed using technologies like PHP, 
HTML, and JavaScript. To manage the databases, MySQL has been employed. 
The website is hosted on Lanka hosting space and is accessible through any web 
browser, be it Edge, Chrome, or Firefox. Furthermore, the system is platform- 


agnostic, functioning seamlessly on both Windows and Linux environments. 


LOCAL STUDIES 

Dinero (2021), The services cape and quality of restaurants in Las Pias 
City of service were evaluated in this study. Particularly, it evaluated the casual 
dining restaurants' service quality; figured out the restaurant's services cape; 
tested the difference in significance when the .variables in the profile were 
grouped together. The descriptive method was used in this study, and availability 
sampling was used to collect data from 403 participants. The modified 
questionnaire was distributed through Google Form online. In contrast, the When 
the variables in the profile were grouped together, the Mann-Whitney Test was 


employed to assess the significant difference. The researcher ensured that the 
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respondents' data was kept private. The findings show that the restaurants' 
tangible service quality is rather strong, followed by certainty and contentment, 
reliability, responsiveness, empathy, and price. Respondents, on the other hand, 
place a high value on employee qualification and service presentation. 
Respondents also highly value the physical environment (internal presentation) 
and product/ brochures/ menus/ webpage, Interior and Exterior Ambient 
Conditions, physical environment (external presentation), and direct/indirect 
external service scape. The majority of respondents, according to the study, are 
female, single, college graduates, and part-time workers between the ages of 23 
and 38. 

As per PJ. Bassig et al.,(2018) The primary objective of this study was to 
design and implement a sales and inventory system tailored for GB's Burger, a 
restaurant chain with four locations in Santolan, Pasig City. The system was 
conceptualized to handle both sales calculations and inventory management for 
the products sold at the establishments. By automating the process, the system 
would track the addition and deduction of products with every transaction. Only 
authorized personnel, namely the owners (admin) and the store staff (users), 
could access the system through password authentication. 

The system's development entailed the utilization of SQL and Visual 


Basic.Net programming languages. It comprised two distinct interfaces for the 
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admin and cashiers/users. The admin system featured a log-in tab, a dashboard, 
a menu section, real-time date and time display, and the admin's name. Selecting 
different buttons prompted corresponding tabs to pop up. The cashier/user 
system was designed as a cashiering system, with a menu table for order entries, 
akin to a traditional point-of-sale setup. It also displayed a tally of the total 
purchased products on the side. Additionally, cashiers could review their sales for 
the day and generate printable reports. 

To gather insights about the existing manual system and obtain feedback 
on the proposed system, the researchers employed a survey questionnaire. This 
questionnaire was divided into two sections: one for the admin and users and the 
other for the customers. The assessment of the manual system's accuracy, 
efficiency, and security revealed the need for an enhanced process. Thus, the 
researchers embarked on creating the sales and inventory system to streamline 
daily transactions and optimize the restaurant's operations. 

M.Cristobal et al.,(2018) Cashless transactions have become a prevalent 
form of financial exchange where individuals utilize methods like debit/credit 
cards, bank transfers, cheques, and mobile payment applications for their 
transactions. In this process, physical money is not physically transferred between 
parties. The adoption of cashless transactions is driven by the convenience and 


reduced risk associated with not carrying physical currency. Users often 
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recommend this method to others due to the positive experiences they've 
encountered. 

However, challenges have emerged that have led some individuals to 
discontinue using cashless systems and even discourage others from using them. 
The adoption and usage of cashless transactions vary among people based on 
their personal experiences. This trend highlights the consumers' role in the market 
as they carefully select goods and services that align with their needs and 
satisfaction. 

In this evolving landscape, consumers' behaviors are influenced by their 
past interactions with cashless transaction systems. This has implications on the 
choices they make in the marketplace, reflecting their pursuit of solutions that 
enhance their overall well-being. 

Mellissa Esteves Guilas (2018) Inventory management control presents a 
notable challenge within the restaurant industry. This paper centers on the 
inventory management practices within selected Greenwich stores, a subsidiary 
of Jollibee Foods Corporation, situated in Quezon City. The focal point is the day- 
to-day operation of inventory management and control, a critical aspect to ensure 
smooth operations and accurate product output. Effective management and 
control of inventory are pivotal to prevent operational inefficiencies and potential 


losses. 
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A misstep in the planning of inventory activities can result in wastage and 
financial setbacks for the company. This study is geared towards identifying the 
pivotal factors that shape inventory management practices and exploring 
approaches that enhance efficiency and effectiveness. The research is conducted 
through a case study methodology, delving into the key elements that impact 
inventory management within the context of the food industry. 

From the insights derived in the case study, the study aims to pinpoint 
influential factors and derive efficient inventory management practices. These 
findings can be practically applied not only to the Greenwich stores studied but 
also provide valuable guidance for other food establishments within Quezon City, 
facing similar challenges. This research contributes to the field by offering a 
valuable framework for identifying key factors and implementing efficient inventory 
management practices, effectively addressing common challenges experienced 


in real-world restaurant operations. 
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SYNTHESIS 

The system we are developing is very similar to those used in local and 
overseas studies. Both local and foreign companies provide the same features as 
our system, such as online meal ordering, sales management, inventory 
management, and other features that benefit both customers and employees. 
Online food ordering is extremely popular (Gupta,2019). Ordering food has 
become a simple and comfortable habit with the click of a mouse. (Andal 
et.al.,2022). The system will become a significant tool for restaurants to better 
management by connecting each and every food ordering transaction rather of 
keeping data on it. (T.DEEPA,2018). If more businesses understood the 
advantages pf having a website for a restaurant, they wouldn't think twice about 
choosing designs that include profitable features like online ordering, menus, 
online reservations, and reviews in social media (Dobrila,2019). The same 
practice is being observed with the objective of making a system that will replace 
the manual process of a restaurant which is time-consuming. 

In relation to the planned system, it will employ the system. This connected 
system will serve as the foundation for the proponents’ development of the Cjzave 


BBQ 8 GRILL Official Website. 
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TECHNICAL BACKGROUND 

In this part, the researchers discussed the procedures, software and 
technologies used in the development of the project. 

The current system of Cjzave BBQ & GRILL uses the manual process in 
managing the inventory, sales, ordering and payments. The restaurant has a 
Facebook Page which is the only platform that they're using, but it is not enough 
to entertain the needs of the customers. To achieve the betterment of the system, 
the ff are used in developing an official website: 

e Front End - The programming languages for front end developing 
that was used was HTML, CSS and JAVASCRIPT. 

o HTML was used to provide the basic structure of the 
site, which is enhanced and modified by other 
technologies like CSS and JavaScript. 

o CSS was used to control presentation, formatting, and 
layout. 

o JavaScript was used to control the behavior of 
different elements. 

e Back End - The programming language for back end developing 
was PHP 8.1. 


e Operating System - The operating system is Windows 11 Home 


31 


Single Language. 
> System Specifications: 
o Processor: Intel(R) Pentium (R) Silver N5000 CPU @ 
1.10 GHz 
o Processor Speed: 1.10 GHz 
o Installed RAM: 4.00 GB (3.83 GB usable) 
o System type: 64-bit 

e Firewall system — used as a secure host restricting unauthorized 
users from accessing the hosts on the network. 

e Local Area Network (LAN) — used to allow access of internal 
servers, websites, and other LANs on the same wide area network. 

The following platforms were chosen by the researchers/programmers for 
constructing the website: 

e Visual Studio Code - is used for editing and fixing coding problems 
in cloud and web applications. With the feature of VS Code that 
includes several FTP extensions, the researchers can sync code 
between the server and the editor without having to download 
additional software. 

e MySQL — used as a database management system (RDBMS) with 


a client-server design. 
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XAMPP server — is used to test its website on personal computers 
before it is released to the main server. This platform provides a 
suitable environment for testing and confirming the functioning of 
projects based on Apache, Perl, MySQL databases, and PHP 
through the host's system. 

Paymongo — used as payment gateway to process online payment 
(Gcash) feature of the website. 

Composer v2.5.7 — used as a dependency management which 
allow the researchers to declare certain library that the project uses 
and will install/update them for you. 

Postman — used to specify that a client is posting data on the given 
Endpoint. A POST request is a method that is used when we need 
to send some additional information inside the body of the request 
to the server. The researcher used this to allow paymongo to receive 
orders from the website. 


Hostinger — used as a Web hosting. 
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CHAPTER Ill 
METHODOLOGY, RESULTS AND DISCUSSIONS 
This chapter provides a comprehensive overview of the methodology that 
can be used to complete and test this project. It is utilized to meet the projects 


goal of producing a flawless outcome. 


RESEARCH METHODOLOGY 

This study employed the descriptive research design as its primary goal is 
to collect data to answer a variety of what, when, and how questions concerning 
about a certain population or group. The method and tool of the data collection 


were presented in this chapter. 


SUBJECTS / RESPONDENTS 
A total of 17 respondents were randomly selected to participate in the 
process. (10) customers , (5) employees and (2) web developers randomly 


regardless of age and gender. 


SAMPLING TECHNIQUE USED 
In this study, the simple random sampling technique was used. This 
process also used a procedure that is randomly used and a non-biased type of 


sampling with everyone having a chance to be one of the respondents. 
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RESEARCH INSTRUMENT 
The researchers have given a specific set of questions to collect and gather 
the data that is needed in the study. This set of questions elicited responses from 


the respondents that were both factual and opinionated. 


PROCEDURE OF DATA GATHERING 
In gathering the data needed, the researchers used a checklist and a 


structured interview style to collect the necessary data. 


SYSTEM / SOFTWARE EVALUATION PLAN 

The system was evaluated using the ISO 2510:2011 standard, which will 
aid in determining which quality features will be considered when evaluating the 
proposed system. The ISO 2510:2011 product quality model included 
functionality, efficiency, compatibility, maintainability, portability, and reliability. 
The data gathered was totaled, analyzed, and statistically handled. The website 
was graded by the respondents using the following values: 

1 - Strongly Disagree; 2 - Disagree; 3 - Fairly Agree; 4 - Agree; and 5 - 
Strongly Agree. 


The following scale was used to interpret respondents’ evaluation. 
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The data were analyzed and interpreted using the following scales: 


POINT RANGE SCALE DESCRIPTION | INTERPRETATION 
5 4.21 — 5.00 Strongly Agree Highly Acceptable 
4 3.41 — 4.20 Agree Acceptable 
3 2.61 — 3.40 Fairly Agree Fair 
2 1.81 — 2.60 Disagree Uncertain 
1 1.00 — 1.80 Strongly Disagree Not Acceptable 


The following formula was used to calculate the weighted mean of each 

item in the user evaluation of the proposed system: 

5(sa) + 4(a) + 3(fa) + 2(d) + 1(sd) 

WM = n 

Where: 
WM = weighted mean 
sa = number of evaluators who strongly agreed with the item 
a = number of evaluators who agreed with the item 
fa = number of evaluators who fairly agreed with the item 
d = number of evaluators who disagreed with the item 
sd = number of evaluators who strongly disagreed with the item 


n = number of evaluators 
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THEORETICAL FRAMEWORK 


There are 3 theories shown below that is related to Korean Style Buffet 


Official Website 


Web Theory is a comprehensive and critical introduction to the 
theories of the internet and the world wide web. Robert Burnett and P. David 
Marshall examine the key debates which surround internet culture, from 
issues of globalization, political economy and regulation, to ideas about 
communication, identity and aesthetics. Web Theory explore the shifts in 
society, culture and the media which have been brought about by the growth 
of the world wide web. 


The widespread popularity of online shopping in current times 
has undoubtedly enhanced the efficiency of the entire buying process. It 
has also posed to digital marketers the threat of losing to the 


competition. This is why marketers keep on trying novel tactics to 
fascinate new customers as well as retain existing ones. One of the many 
tactics includes encouraging customers to buy impulsively 


“Shopping Continuum Theory (SCT)” in order to understand the 
consumers choice for purchasing online; to examine relationships 
between online shopping environments and shopping tasks from both 
cognitive and affective aspects; and to provide meaningful managerial 
implications to online retailing. 


Figure 1.0 Theoretical Framework showing 3 theories related to Korean 


Style Buffet Website 
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CONCEPTUAL FRAMEWORK 
This study also determine on how the chosen proposed system could 


develop a better process to the Korean Style Buffet. 


INPUT OUTPUT 


- Gather 
DM or Designing of 
prototype 


- Analyze the 
gathered 
information 
and data 


Implementation of 


Develop the Cizave BBQ & GRILL 


prototype 


Official Website 


Test the 
prototype 


- Identify the 
problem 


Figure 2.0 Conceptual Framework showing the proposed system's 
content / functionality. The process used as a guide of the researchers in 
conducting the research was presented through Input-Process-Output (IPO) 


approach. 


SOFTWARE DESIGN, PRODUCTS AND / OR PROCESSES 

The Software creation Life Cycle refers to the application of standard 
business practices to the creation of software applications. The SDLC is a 
technique for assessing and enhancing the development process. It permits a 


fine-grained examination of each process phase. 
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PLANNING 

The project leaders are responsible for going over the project terms during 
the planning phase. Calculating labor and material expenses, creating a timeline 
with specific targets, and assembling the project's teams and leadership structure 
are all part of this process. Stakeholder feedback can be incorporated into the 
planning process. They are the folks who will profit from the application. Collect 
feedback from prospective customers, developers, subject matter experts, and 
sales people. The scope and aim of the application should be clearly established 
during planning. It establishes a strategy and prepares the team to efficiently 
produce software. It also establishes boundaries to prevent the project from 


expanding or deviating from its original goal. 


DEFINE REQUIREMENTS 

In order to determine the functions and needs of the application, the 
planning includes defining the requirements. For instance, a social media 
software would require the capacity to connect with a friend. A program that 


manages inventories might need a search function. 
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DESIGN AND PROTOTYPING 

The design phase influences a software program's behavior. Some of the 
design aspects are as follows: 

Architecture - It defines the programming language, industry standards, 
overall design, and template usage. 

User Interface - Defines how customers interact with software and how 
the program responds to input. 

Platforms - The platforms on which the software will run are defined, such 
as Apple, Android, Windows, Linux, or even game consoles. 

Programming - Not only the programming language, but also the problem- 
solving and task-completion strategies of the application. 

Communications - Methods for connecting with extra assets, such as a 
central server or other instances of the software, as stated below. 

Security - Defines the security measures for the program. Prototyping is a 
step in the design process. Under the iterative software development approach, 
a prototype is equivalent to an early version of software. It gives a general picture 
of how the program appears and functions. Stakeholders will be able to interact 
with this "hands-on" design. Use user feedback to help you improve your software. 
Making changes in the Prototype phase costs less than rewriting code in the 


Development phase. 
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SOFTWARE DEVELOPMENT 

The software development process is the stage where the actual software 
is created. This phase can encompass both small projects that a single developer 
can handle and larger projects that require collaboration among multiple teams. 
Using an Access Control or Source Code Management system to keep track of 
code modifications is critical during this time. These tools facilitate seamless 
collaboration among developers, ensuring compatibility among different team 
efforts and achieving the desired project objectives. 

The coding process involves various tasks that contribute to the project's 
progression. Developers often need to enhance their skills and collaborate with 
teammates. Identifying and rectifying defects and issues is a critical aspect. 
Common hindrances to development progress include waiting for test outcomes 
and writing code for an application's functionality. A well-structured Software 
Development Life Cycle (SDLC) can predict and manage such delays, effectively 
reallocating developers to other tasks. 

Documentation holds significant value for software engineers. It serves as 
a guide and reference, providing clarity and insights. Documentation can range 
from user guides that simplify app usage to more technical aspects like comments 
in source code explaining the rationale behind certain techniques. Documentation 


is beneficial for both developers and firms aiming to create user-friendly products. 
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Documentation can take various forms, from a brief introductory 
walkthrough when launching the application to comprehensive video tutorials. 
Written materials, such as user guides, troubleshooting instructions, and FAQs, 


can also assist users in resolving issues and addressing technical queries. 


TESTING 

Thorough testing of a program before its release to users is of utmost 
importance. Various testing methods, such as security testing, can be automated 
for efficiency. However, some testing procedures are context-specific, 
necessitating the creation of simulated production environments, especially for 
intricate deployments. 

During testing, each function within the program should undergo 
verification to ensure accurate functionality. Additionally, different components of 
the application need to be assessed to ascertain their seamless integration and 
flawless operation as a whole. Performance testing is crucial to identify and rectify 
any processing delays or interruptions. 

The testing phase serves as a preventive measure to minimize the 
occurrence of problems and glitches encountered by end-users. As a direct 
outcome, the quality of the final product is heightened, resulting in increased 


customer satisfaction and improved utilization rates. 
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DEPLOYMENT 

The deployment phase marks the stage at which the application becomes 
accessible for use by its intended users. Many organizations opt to automate this 
phase to ensure a streamlined and efficient process. Deployment can range from 
a straightforward setup involving a payment portal and a download link on the 
company's website to more complex scenarios. 

However, deployment can be difficult. Migrating a complete company-wide 
database, for example, to a freshly designed application is a difficult undertaking. 
The complexities originate from the database's interdependence with multiple 
other systems. Because of the extensive relationships involved, integrating this 


upgrade may necessitate a significant expenditure of time and work. 


OPERATIONS AND MAINTENANCE 

The development cycle is practically finished at this stage. The application 
is now complete and in use in the field. However, the period of operation and 
maintenance remains crucial. Users uncover flaws that were missed during 
testing during this phase. These issues must be addressed, which may 
necessitate the beginning of new development cycles. In addition to delivering 
fixes, iterative development approaches, for example, provide more functionality 


in future versions. A new Development Cycle can be started for each new release. 
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SOFTWARE DEVELOPMENT LIFE CYCLE MODEL 

The researchers will use the Agile Software Development Life Cycle model 
as it illustrates in figure 7. 

The Agile software development process was conceived to empower 
developers in designing projects that can swiftly accommodate evolving 
requirements. Hence, the core objective of formulating the Agile model is to 
streamline and expedite project completion. Achieving this aim necessitates 
maintaining a high level of agility throughout the development lifecycle. 

The Agile approach was specifically devised to assist developers in crafting 
projects that can readily adapt to changing demands. This adaptability is achieved 
by optimizing the project's progression and eliminating activities that may not be 
pertinent to the specific project requirements. 

In essence, the fundamental goal of introducing the Agile model is to 
enhance the simplicity and speed of project delivery. Sustaining agility throughout 
the development process involves adjusting the project's trajectory and trimming 
extraneous tasks. Each iteration within the Agile framework engages a cross- 
functional team of developers who collaborate on various aspects of product 
development simultaneously, enabling them to: 

Planning - Agile planning is a project management process that employs 


a step-by-step, iterative methodology rather than to start a project thorough a plan, 


44 


which is frequently product-related, Agile allows for need changes as the project 
develops and focuses on continual feedback from end users. 

Requirements Analysis - The Agile Manifesto is a collection of 
straightforward yet effective guidelines that underpin much of what we do in 
software development. 

Design - Any software development endeavor would be incomplete 
without design. Despite this, agile teams frequently struggle with the question 
"what should we do about design?" because of four factors: 

> During the planning phase, many teams focus on high-fidelity designs, 
resulting in a waterfall culture during implementation. 

> Designers are frequently shifted between teams and only have a limited 
amount of time to dedicate to any one of them. 

> Designers don't always have a simple means to communicate with the 
technical team. 

> The logic and presentation layers in the code base are frequently not 
adequately separated, making style changes difficult. 

Development - Agile product development refers to the process of 

developing a product using the Agile methodology. The project is divided into 


sprints, which are short development cycles in agile product development. 
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SYSTEM ARCHITECTURE 


Figure 3.0 Use Case Diagram. 
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CONCEPTUAL DESIGN 


User Interface Design 


Cjzave BBQ & GRILL Home AboutUs Menu Order Contact Q & e 


Figure 4.0 Navigation Menu Bar 
It shows the different features of the website such as Home, About Us, 
Menu, Order and Contact. Also, the Search Bar, Shopping Cart and User Profile 


icon. 


Cjzave BBQ & GRILL Home AboutUs Menu Order Contact 


NIZA 


KOR AN STYLE BUFE 


Figure 4.1 Homepage 
In this figure, you can see the overview of the website. It also contains 
different parts of the website including the About us page, Menu page, Order page 


and Contact page. 
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Cjzave BBQ & GRILL Home AboutUs Menu Order Contact 


1st Samgyupsal in Bicol since 2014 


Unlimited Korean BBQ! 


A Korean-style BBQ buffet that is now serving 
Bicolanos to enjoy their food, cooked in front of their 
table. 


Cjzave BBQ & GRILL Home AboutUs Order Contact 


Want to Celebrate your Birthday or any 
Occasion? 


We OFFER!!! 


The best and cheapest deals where you can eat all the 
meats and seafood you want. You will also get 
unlimited Lettuce, pajori salad, kimchi, fruits (3 varieties), 
and dipping sauces such as melted cheese, saamjang 
paste, sweet bbq sauce, and mayonnaise (all home- 


made) for only 249 php per head. 
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Cjzave BBQ & GRILL Home AboutUs Menu Order Contact Q Qu (2) 
Y 


Kambal Pandesal 
SAMGYUPSAL 
House NAGA 
Not too busy 


Come and Visit us at a Caceres 


Magsaysay Avenue. Reg grove oa andoni 
In front of Tapsi Terminal e Q 0 


We are Open at 9:00 am to 9:00 pm (cut off time of accepting customer) d 
NOTE: Temporarily Closed for Dine-in Customers, we are only accepting Samgyup 199 9 o) 


delaras: Magsaysay Ye St 
3 Buffet 9 
DAL" r 
: Q^ 


Cjzave BBQ & GRILL Home AboutUs Menu Order Contact Q Qvo o 


Children below 3 feet: 
FREE! 

Children below 4 feet: 
50%! 

Senior Citizen and 
PWD: 20%! 


Figure 4.2 Homepage Center Part 
In this figure shows the Cjzave BBQ & GRILL short advertisement such 


as its offers/deals, locations and discounts. 
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Cjzave BBQ & GRILL Home AboutUs Menu Order Contact €) Qu Ee? 


We OFFER!!! 


pajori Og, kimchi 10 


Saamjang sauce, melted cheese et Bbq sauce, all home- 


made. You can enjoy the best tasting Cjzave BBQ & GRILL authentic 


Price Starts at 249php. 


B. Affordable PA Good quality 


Cjzave BBQ & GRILL Home About Us Menu Order Contact 


Our History 


En Fast Delivery B Affordable Y Good quality 


Q 


Figure 4.3 About Us Page 
This is the About Us Page, where you can see the deals and the short 


history of the restaurant. 
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Cjzave BBQ & GRILL Home AboutUs Menu Order Contact 


Customer's Review 


What they say: 


e Ivan e Gabby & Mary Dianne e 
KZ? keke VG os e s s xz sce s d dz wi 


Figure 4.4 Review Page 


This figure shows the review page which contains the different review of 


the customers. 


210 9 | & 


Social Media Opening Hours Address Contact Number 


© Copyright @ By AMA BSIT Students | All Rights Reserved 


Figure 4.5 Footer 
In this part, you can see the social media accounts, opening and closing 


hours, it’s location and the contact information of the restaurant. 
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"You will get Free for every worth of 500 pesos: Pajori 100g, Lettuce 100g, Kimchi 100g and Dipping Sauces such as Saamjang Sauce, Melted Cheese & Sweet BBQ 
sauce are all home-made." 


" 
Å 
Kam K FN o> 
Marinated Beef 500g || Pork Gochujang 500g Pork Galbi 500g Chicken Gochujang Pork Belly 500g 
5 

me 25000 1 mo 25000 1 Pro 25000 mme 29000 Pro 29000 

Phe 23000 
= å 
Dam : — 

Shrimp 5009 Squid 500g 

me 30000 1 mo 30000 


Figure 4.6. Menu Page 
This is where you can see the menu, available and not available dishes of 
the restaurant. To proceed with ordering, you are asked to log in/register by just 
clicking the cart icon of your preferred order and it will automatically be added to 


your cart. 


Cjzave BBQ & GRILL 


YOUR ORDERS 


Placed on : 2023-08-03 

Name : Ivan B. Collantes 

E-mail : Icollantes86@gmail.com 

Contact Number : «639155941309 

Address : 99,Magsaysay Ave.,Balatas,in-front of seoul 199 
Payment Method : G-cash 

Orders : Marinated Beef 500g (100 x 1) - .00 

Total Price : Php100.00 

Special Instruction : /- 


Order Status : Delivered 


Figure 4.7 Order Page 
This figure shows the order page, wherein you can see the record of your 


past and current order. 
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Cjzave BBQ & GRILL 


Tell Us Something! 


Cjzave BBQ & GRILL Home About Us Menu Order Contact Ka) Qu e 


Please fill out the form below and we will get 


back to you as soon as possible. 


* Name 


Tell | 
* Email 


| Enter your Name 
* Message 


| Enter your Numb J Add free live chat to your site 
we 
% — Hmm | Enter your E-mail | 


Figure 4.8 Contact Us Page 
This page is where you can leave your inquiries, reviews and suggestions 
to the restaurant. You can also fill up your needed information / messages and it 
will have received by them. It also has a live chat support wherein the customers 


can easily contact the admin of the restaurant. 
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Admin Interface Design 


Admin Home Products Pending Out Complete Users Messages — 


Figure 4.9 Admin Panel Navigation Menu Bar 


It shows the different features of the admin panel such as Home, Products, 


Pending Orders, Out for Delivery, Complete Orders, Users, Messages and the 


Admin Profile icon. 


Admin Home Products Pending Out Complete Users Messages e 


Dashboard 


welcome! 


Figure 4.10 Dashboard 
In this figure shows the homepage wherein you can see the dashboard. 
You can see the Total Pending Orders, Total Out for Delivery, Total Complete 


Orders, Total Orders, Products Added, User Accounts, Admin Accounts and 


Messages. 
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Admin Home Products Pending Out Complete Users Messages 2 


Add Product 


select category -- 


Choose File | No file chosen 


Add Product 


Figure 4.11 Products 
Under products, the admin can Add a Product wherein they can enter the 
Products Name, Product Part, Price, select its category according to its 
availability, add an image that describe to the new product and it can also be 


updated and deleted. 
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Pending Orders 


User Id: 69 


Transaction Id : 
pay-CyhcUqaBhpNgbXNXivoUkfp| 


Placed On: 2023-08-03 
Name: Ivan B. Collantes 


E-mail : 


Icollantes86@gmail.com 


Total Products : Marinated Beef 


500g (100 x 1) - .00 
Total Price : Php100.00 
Special Instruction: / 


Payment Method : G-cash 


Delete 


Your order is out for del ~ 


preparing 


Your order is out for delivery! 


H 


Figure 4.12 Pending Orders 


In this figure, it shows all of the customers pending orders. The admin will 


update its status once the “Product is out for Delivery”. 


Out For Delivery 


User Id : 63 


Transaction Id 
pay. CyhcUqaBhpNgbXNXivoUkfpi 


Placed On : 2023-08-03 
Name: Ivan B. Collantes 


E-mai 


Icollantes86@gmail.com 


Contact Number : 


500g 100 x 1) -.00 
Total Price : Php100.00 


Special Instruction : / 


Payment Method : G cash 


Your order is out for del ~ 


Figure 4.13 Out 


This figure shows the orders that is 


Your order is out for del v 


Your order is out for delivery! 


Delivered 


for Delivery 


out for delivery. The admin will update 


its status as “Delivered” once the product is already deliver to the customer. 
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Completed Orders 


User Id : 69 


Transaction Id 
pay -CyhcUqa8hpNgbXNXivoUkfp) 


Placed On : 2023-08-03, 
Name: Ivan B. Collantes 


E-mail 
Icollantes86@gmail.com 


Contact Number : 
«6391 


Ave..Balatas,in-front of seoul 199 


Total Products : Marinated Beef 
500g (100 x 1) - .00 


Total Price : Php100.00 Del ivered 


Special Instruction : / 


Payment Method : G-cash 


Figure 4.14 Completed Orders 
In this figure shows all the completed orders. The admin can also 


“Delete” the completed order if necessary. 


Admin Home Products Pending Out Complete Users Messages 


Users Account 
User Id : 29 User Id: 32 User 
Username: rielbert Username : John Wick Username 


Delete Delete 


g 


User Id : 35 User Id :47 


Username : Shantal Dioras Username: lucky 


Delete 


User Id : 50 User Id : 51 User Id : 52 


Username : Cris Junalice Avis Username: Ann Username : Maymay 


De 


Delete 


User Id :53 User Id : 54 User Id: 55 
Username : Nicole Castro Username : Dana Username : Brian Dela Cruz 
User Id: 56 User Id: 57 User Id :58 
Username: Charla Mae Username ` Aldrin Reyes Username: Alyssa Bulan 


Figure 4.15 Users 


In this figure shows all the users accounts that access the Cjzave BBQ & 


GRILL Official Website. 
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Home Products Pending Out Complete Admins Users Messages 2 


Messages 
Date : 2023-07-31 a 2023-08-01 Date : 2023-08-03 
Name : Peter Thompson Name : Mike Name: Mik 
Contact Number Contact Number Contact Number 
E-mail E-ma E-mai 
peterPAMASPISSE@gmail.com mikeMulkaxok@gmail.com mikePAMASPISSE@gmail.com 


Message : Good Day This is 
Mike Carter Let me introduce 


ii there, I have 
wed your domain in MOZ 
to you our latest rese and have observed th: 


results from our constant S may benefit from an ir 

feedbacks that we have fro authority. Our solution 

our plans guarantees you a high-quality 
domain ore within 
ap nths. This 


reputati well as targeting, will ine 
causing boosted website web com SEO trend have an 
traffic as well as rev immediate push. The method 
go here https:/Aww is actually very simple, we are 
press.com/autosug: 


how your busine: 


se your organic 


stronger against 
building links from domains updates. Check o 
that have a high number of for more details 
advantage of Google keywords ranking for them. https:/ w.monk 
Autocomplete and enhance Forget about the SEO metrics authority-plan/ NE 
your sales potential. Thank you or any other factors that Domain Rating 

http: v.monk 


REN | NENNEN 


digital.cofdomain- 


/: Ahrefs 


Date : 2023-08-03 Date : 2023-08-04 


Name: Mike Thomson Name : 078 7! 


— php 


Figure 4.16 Messages 
It shows the customers inquiries, reviews and suggestions according to its 
date, name, contact number, e-mail number and the admin will also receive the 


customers needed information and messages. 


©) Cizave 
+ Groups 
i ÅR Visitors E) Chats 
Live Visitors få LiveNow ~ om E 
+ Direct Messages (1) i = TNR 
D woos 
i t7days to Jo 
[3 Page Views ail Reporting lore 
day Positive Sentiment Kam 
D woos Engagement 
sn Availability EN 
History What's The Latest 
Visitor Agent Time Access the limitless power of Al 
and access 
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E s [ole ames. e NO 


Figure 4.17 Tawk.To Account (Live Chat Support) 
In this figure, it shows the live chat support wherein the admin and the client 
will easily interact with each other especially with regards of their inquiries and 


suggestions. 


COST BENEFIT ANALYSIS 

In this section, it shows the procedure for estimating all costs involved like 
software, hardware and labor that are required for the application of the proposed 
system. This will also compare the cost to implement such an application with the 
benefits delivered by the application and demonstrate the values to the given 
institution by the application of the project. 


l. Hardware Cost (Source: easypc.com) 
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Recommended 


Requirements 


Specifications 


Unit 


Quantity 


Price 


Cost 


Processor 


AMD Ryzen 5 4500 
Socket Am4 3.6GHz with 
wraith stealth cooler MPK 


processor 


P4,745 


P4,745 


Motherboard 


ASUS Prime A3204M-K 


Socket Am4 Ddr4 


Motherboard 


P2,950 


P2,950 


Monitor 


Nvision N190HD 19 Inch 


LED Monitor 


P1,999 


P1,999 


RAM 


Team Elite Plus 8gb 1x8 
3200Mhz Black 
Red/Black Gold Ddr4 


Memory 


P1,140 


P1,140 


Keyboard w/ Mouse 


RAKK Aptas V2 Laser- 
etched ABS Keycaps, 
Gaming keyboard, Anti- 
flex plate, Soft braided 
cable Keyboard and 


Mouse Bundle 


P395 


P395 


Table 5.1 Hardware Cost 


60 


Total: P11,229.00 


Il. Software Development Cost 


Personnel No. of Personnel Salary 
Programmer 1 20,000 
Researcher 1 20,000 

System Analyst 1 39,000 


Table 5.2 Software Development Cost 
Source: www.glassdoor.com 


Personnel Salary for 60 Days: 


Programmer: 20,000.00/60 = P333.33 


Researcher: 20,000.00/60 = P333.33 


System Analyst: 39,000.00/60 = P650.00 


Il. Operational Cost 


A. System Cost 


Total: P79,000.00 


Items Specifications Cost 
Operating System Windows 10 Home Free 
Front End -Single Web Hosting P249/monthly 
-.COM Domain P429.09/yearly 
Back End MySQL Database Free 


Table 5.3 System Cost 
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Total: P678.09.00 


Source: hostinger.com 


B. Stationeries and Supplies 
Items Quantity Price Total 
Bond Paper Letter 1 Ream 255.00 255.00 
Ink Cartridge Set 1 707.00 707.00 


Table 5.4 Stationeries and Supplies Total: P962.00 


Source: nationalbookstore.com 


C. Utility Expenses 


Particulars Cost 
Electricity 900.00 
Internet 1500.00 
Table 5.5 Utility Expenses Total: 2,400.00 


Source: casureco1.com and convergeict.com 
Computer usage cost P3.00 per day for 10 hours used in 30 days 
Printer usage cost P15.00 per day for 10 hours used in 30 days 


The cost of usage was based and estimated using the Casureco 1 
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D. Training Cost 


Personnel Amount per day | Days | Hours | Total 
Administrator 400.00 1 8 400.00 
Employee 350.00 1 9 350.00 
Table 5.6 Training Cost Total: P750.00 


IV. Summary Cost 


Cost Amount 

Hardware Cost 11,229.00 

Software Development Cost 79,000.00 

System Cost 678.09.00 
Stationeries and Supplies 962.00 

Utility Expenses 2,400.00 
Training Cost 750.00 

Table 5.7 Summary Cost i Total: P95,019.09 
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Estimated Benefits: 
Accuracy and efficiency of the software at approximately 85% 
Total estimated Benefits = 95,019.09* 85% 


Total = P 80,766.2265 


Payback Period 
Payback Period = (Total Cost / Total Estimated Benefits) * 12 = 
(95,019.09/80, 766.2265) *12 


Total = 14 months or 1 year and 2 months 


Return of Investment 
Return of Investment = (Total Estimated Benefits / Total Cost) * 
100 = (80,766.2265/95,019.09) * 100 


Total = 85% 
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REQUIREMENT ANALYSIS 

A software need is one that must be implemented in the system, regardless 
of whether it is functional or non-functional. A "functional" service is one that is 
delivered to the user. A software need might be either non-functional or a 
performance requirement. For example, a non-functional need is that every page 


of the system be visible.. 


Requirement Quality Example of Bad Example of Good 
Requirement Requirement 

Complete A user will log into the A user will log into 
system using his or her the system by 


username, password, and | providing only his 


other pertinent information. username and 
password. 
Testable Each system page will The system's 
load in a reasonable pages will loadina 
amount of time. matter of seconds. 


Table 6. Requirement Analysis (software) 
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HARDWARE REQUIREMENTS 
A computer that is less than 5 years old is strongly recommended by the 

researchers. 
Operating System: Windows 10 Pro 
Processor: Processor Manufacturer Intel / Processor Model i3 

> Hard Drive: Minimum 32 GB; Recommended 64 GB or more 

> Memory (RAM): Minimum 1 GB; Recommended 4 GB or above 

> Ethernet connection (LAN) OR a wireless adapter (Wi-Fi) 


> Acamera and microphone are required in some cases. 


SYSTEM FLOW 


4 
5 Testing 


Deployment 


3 
AG | LE Development 


1 


Requirements 


Figure 7. Agile Software Development Life Cycle Model 
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BLOCK DIAGRAM 


Order Online 


Product 
Management 


Cjzave BBQ & GRILL 
Official Website 


Inventory 


Admin 
Management 


Customer 
Management 


Figure 8.1 Block Diagram of the System 


Viewing of Restaurant's Information 
Viewing of Menus 


Adding/Viewing of Reviews 
Placing of Orders 


Login to 
system Ask Inquiries 


Customer 
Rules 


E 
Gol 


Figure 8.2. Customer Data Flow Diagram 
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Manage Customers Online Orders 


Updating of Menu 


Login to 
system 


Figure 8.3 Admin Data Flow Diagram 
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Visual Paradigm Online Free Edition 


Visual Paradigm Online Free Edition 


Figure 9.0 Admin Database ERD 
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DEVELOPMENT AND TESTING 

The development of the system was acquired through the interviewing 
technique, which served as the requirements on creating the system. Additionally, 
the researchers looked at the manual procedures and the flow of the restaurant. 
When the gathered information was acquired, the developers studied it to come 
up with a solution and take the necessary steps to finish the official website and 
satisfy the needs of the beneficiary. The development of the prototype after the 
data had been analyzed. The user interface utilized to assess the system's 
general atmosphere and identify the functionalities that is needed to be prioritized. 

The beneficiaries has been assessed the finished prototype, and the 
developers were open to any improvements, suggestions or any 
recommendations for the development of the system. The development team, 
collected data once more in order to improve the prototype they had to built. Until 
the recipient was happy and gave his or her approval to the provided prototype. 
The developer team finished the prototype and then incorporated the logical parts 
of the system to make it useful and functionable, starting with the software itself. 
The official website were finally combined and developed that serves as the 
logging in and sign-up portal for the users so that they may work together as one. 
The testing was also conducted to identify any faults and make any necessary 


modifications based on the beneficiary's suggestions. 
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INPUT AND OUTPUT REPORTS AND ANALYSIS 


The official website of the restaurant, which is called the Cjzave BBQ & 
GRILL Official Website, will satisfy the needs of the customers and beneficiary. 
Online ordering with regards on delivery system will be a big help to the restaurant 
on managing orders. The customers can access the website anytime and 
anywhere and can view the available dishes/products and get to know more about 
the restaurant’s services that been offered. They also view and purchase the 
products according to their needs. The administrator also can easily access, add 
and modify its products availability, manage its inventory and sales and can easily 
replace/change the details if it is needed to be updated. 

The system shows how the official website works through its flows and 
functions. It also show its effectivity and on how it may benefit the recipient of the 
finished system or product. Since the system was successfully works and used, 
the client and the customers will be able to know about the services, answer their 


queries and can easily order the dish that they needed. 
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DESCRIPTION OF PROTOTYPE 

Cjzave BBQ & GRILL Official Website is a web-based system that focuses 
on online ordering, online payment, monitoring of inventory and sales. This web- 
based system is implemented to the restaurant and able to manage by the owner 
and used by the staffs and customers. Since, the possible outcome of this web- 
based system was to implement and use as the requirement on the proposed 
systems functionality upon online processing. The researchers created a 
prototype on the users interface, homepage, about us page, menu page, 
navigation bar, order page, contact page, footer, and the review page. While in 
the admin panel, shows the home dashboard, product shop, placed orders, admin 
account, user account, messages that shows the requested or additional needs 


of the customers and adding registered accounts. 


IMPLEMENTATION PLAN 

In this outline, it shows how the project will be carried out, what is the 
project's strategic objectives and phases, as well as listing the resources needed 
for the project's success. 
Proposal Presentation 

On implementing of this project, the researchers conducted a project 


proposal to the selected beneficiary. It also obtained the general objective that the 
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beneficiary wanted to achieve. For some reasons, the fulfillment of this project is 
for the improvement and betterment of the restaurant. 
Consent of Beneficiary 

In this study, the proponents ask a consent to the beneficiary in order to 
proceed the proposed system/project. 
Identifying Problems 

When the proponents was conducted an interview, it was easy to identify 
what was the problems that the restaurant was facing that is needed to be solved. 
Recommendations 

The manual process of the restaurant was recommended to have a web- 
based system in order to process it online and to lessen the staffs workloads, so 
that it is needed to be implemented. 
Planning 

Upon the in-progress project of the system development, the beneficiary is 
intended to make a feedback and gave some suggestions with regards the 
system. On this step, the proponents plan to overcome the needs of the 
beneficiary. 
Prototyping 
On this process, the researchers takes place of the concept design and discuss it 


to the beneficiary on how it will be used to make Cjzave BBQ & GRILL Official 
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Website effectively, efficiently and functional. 
Modifications 

In this step, the proponents managed the planned designs and features of 
Cjzave BBQ & GRILL Official Website. The beneficiary will be able to give some 
suggestions with regards the system. 
Development 

During the development of web-based system, it shows on how the 
proponents satisfy the beneficiaries need by the use of local host. It also meets 
its goal and general objective to make the system works and make it possible. 
Testing 

On this process, the implementation of the web-based system will takes 
place. It will also detect some errors and fixed lags. The beneficiary will check the 
system if it is functioning properly. Hence, the proponents will be able to evaluate 
the outcome of the produced system. 
Release 

When deploying/releasing of Cjzave BBQ & GRILL official website, it 
requires that the whole system is functioning so well. The benificiary will show 
the systems interpretation which is highly acceptable about the said system and 


the products that was shown etc. 
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IMPLEMENTATION RESULTS 
System/Software Evaluation Results 

In this study, the respondents answers an evaluation from Cjzave BBQ & 
GRILL, 17 respondents participated in the survey. (10) customers, (5) employees 
and (2) web developer. It is evaluated based on its functionality, efficiency, 


compatibility, maintainability, portability, and reliability of ISO 2510:2011. 


Functionality 


Functional Appropriateness Functional Completeness Functional Correctness 


Figure 10.0. Functionality 
In this figure, it shows the result of Functionality. In Functional 
Appropriateness, it was evaluated as Highly Acceptable with a weighted mean 
score of 4.82. In Functional Completeness, it was evaluated as Highly Acceptable 


with a weighted mean score of 4.71. While, in Functional Correctness, it was 
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evaluated as Highly Acceptable with a weighted mean score of 4.71. The overall 


functionality has a total weighted mean of 4.74 evaluated as Highly Acceptable. 


Efficiency 


Capacity Time Behaviour Resource Utilization 


Figure 10.1. Efficiency 
In this figure, it shows the result of Efficiency. In Capacity, it was evaluated 
as Highly Acceptable with a weighted mean score of 4.71. In Time Behavior, it 
was evaluated as Highly Acceptable with a weighted mean score of 4.53. While, 
in Resource Utilization, it was evaluated as Highly Acceptable with a weighted 
mean score of 4.71. The overall efficiency has a total weighted mean of 4.65 


evaluated as Highly Acceptable. 
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Compatibility 


Co-Existence Interoperability 


Figure 10.2. Compatibility 
In this figure, it shows the result of Compatibility. In Co-Existence, it was 
evaluated as Highly Acceptable with a weighted mean score of 4.65. While in 
Interoperability, it was evaluated as Highly Acceptable with a weighted mean 
score of 4.65. The overall compatibility has a total weighted mean of 4.65 


evaluated as Highly Acceptable. 
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Usability 


Operability Appropriate Learnability Accessibility 
Recognizability 


Figure 10.3. Usability 
In this figure, it shows the result of Usability. In Operability, it was evaluated 
as Highly Acceptable with a weighted mean score of 4.59. In Appropriate 
Recognizability, it was evaluated as Highly Acceptable with a weighted mean of 
4.71. In Learnability, it was evaluated as Highly Acceptable with a weighted mean 
of 4.65. While in Accessibility, it was evaluated as Highly Acceptable with a 
weighted mean score of 4.71. The overall usability has a total weighted mean of 


4.67 evaluated as Highly Acceptable. 


78 


Maintainability 


Modifiability Analyzability 


Figure 10.4. Maintainability 
In this figure, it shows the result of Maintainability. In Modifiability, it was 
evaluated as Highly Acceptable with a weighted mean score of 4.65. While in 
Analyzability, it was evaluated as Highly Acceptable with a weighted mean score 
of 4.71. The overall maintainability has a total weighted mean of 4.68 evaluated 


as Highly Acceptable. 
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Portability 


Adaptability 


Figure 10.5. Portability 
In this figure, it shows the result of Portability. In Adaptability, it was 
evaluated as Highly Acceptable with a weighted mean score of 4.65. So that, the 


overall portability was Highly Acceptable. 
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Reliability 


Recoverability Availability Fault-Tolerance 


Figure 10.6. Reliability 
In this figure, it shows the result of Reliability. In Recoverability, it was 
evaluated as Highly Acceptable with a weighted mean score of 4.65. In 
Availability, it was evaluated as Highly Acceptable with a weighted mean score of 
4.65. While in Fault-Tolerance, it was evaluated as Highly Acceptable with a 
weighted mean score of 4.65. The overall maintainability has a total weighted 


mean of 4.65 evaluated as Highly Acceptable. 
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Security 


Integrity Confidentiality Non-Repudiation 


Figure 10.7. Security 
In this figure, it shows the result of Security. In Integrity, it was evaluated 
as Highly Acceptable with a weighted mean score of 4.76. In Confidentiality, it 
was evaluated as Highly Acceptable with a weighted mean score of 4.76. While 
in Non-Repudiation, it was evaluated as Highly Acceptable with a weighted mean 
score of 4.59. The overall security has a total weighted mean of 4.70 evaluated 


as Highly Acceptable. 


82 


CHAPTER IV 
SUMMARY OF FINDINGS, CONCLUSION & RECOMMENDATIONS 
This chapter represents the research key findings wherein the discussion 
section analyzes the findings, represents summary and conclusion derived in the 
conduct of the study which is Cjzave BBQ & GRILL Official Website. It also 


provides recommendations that can be pursued by the researchers. 


SUMMARY OF FINDINGS 

The findings of the study were summarized according to the statement of 
the problem provided in the first chapter of the study. Cjzave BBQ & GRILL Official 
Website currently uses the manual process in terms of ordering, payment 
process, inventory, and sales management. The researchers conducted an 
interview with the owner of the restaurant to provide some of their experiences 
with the current procedure of the restaurant. According to the owner, they did 
experience some hardships with manual processing which may cause too much 
workload for their staff, loss of records and conflict of additional orders. Due to the 
known problems of the restaurant, the researchers proposed a system which will 
aid better process by providing an official website for the restaurant which is open 
to a broader target audience and highlighted features such as online ordering that 


will allow customers to view the actual photos of the menus offered in the 
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restaurant, online payment (G-cash) which allows the customer to easily pay with 
just a few touch, proper inventory and sales management which will help the staff 
to manage their records easily and will be accessible only to authorized personnel 
of the restaurant. 

For the survey summary report, Functionality was evaluated as Highly 
Acceptable with a total weighted mean of 4.75; Efficiency was evaluated as Highly 
Acceptable with a total weighted mean of 4.65; Compatibility was evaluated as 
Highly Acceptable with a total weighted mean of 4.65. Usability was evaluated as 
Highly Acceptable with a total weighted mean of 4.67; Maintainability was 
evaluated as Highly Acceptable with a total weighted mean of 4.68; Portability 
was evaluated as Highly Acceptable with a total weighted mean of 4.65; Reliability 
was evaluated as Highly Acceptable with a total weighted mean 4.65 and lastly, 


Security was evaluated as Highly Acceptable with a total weighted mean of 4.70. 


CONCLUSION 

Based on the findings, the researchers concluded that Cjzave BBQ & 
GRILL Korean Style Buffet may rely on the web-based system in this modern age 
as it will be a big help with their workloads. As the results of the evaluation 
conducted by the researchers, the web-based system was highly acceptable with 


the total weighted mean of 4.68. 
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The proposed system received great feedback from the respondents. 


RECOMMENDATIONS 

The researchers came up with the following recommendations after some 
thorough evaluation: 
1. To include a reservation form and list when the restaurant is open to dine- 
in customers. 
2. To add a poster of possible rewards (e.g. coupons) for customers in the 
home page of the website to attract more customers. 
3. To add a sales generator feature, which will automatically sum all records 
of orders daily to make recording of everyday sales easy. 
4. To improve the security of the account of the customers upon registration 


by providing verification.. 
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APPENDICES A 


Relevant Source Codes 


Index.php 
<?php 
include 'components/connect.php'; 


session_start(); 


if(isset($_ SESSION[user id'])) 
$user id = $ SESSION[user id']; 
Jelse( 
$user id ="; 


^ 


include 'components/add cart.php'; 
?» 


<!DOCTYPE html> 
«html lang="en"> 


«head» 
«meta charset-"UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 
<title>Cjzave BBQ & GRILL Official Website</title> 
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper- 
bundle.min.css" /> 


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 


<link rel="stylesheet" href="css/style.css"> 
</head> 


<Body> 
<!-- header section starts--> 
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<?php include 'components/user header.php'; ?> 
<!-- header section ends--> 


<!-- home section starts--> 
<section class="homerun" id="home"></section> 
<section class="home" id="home"> 


<div class="swiper mySwiper home-slider"> 
<div class="swiper-wrapper wrapper"> 


<div class="swiper-slide slide"> 
<div class="content"> 
<span>1st Samgyupsal in Bicol since 2014</span> 
<h3>Unlimited Korean BBQ!</h3> 
<p>A Korean-style BBQ buffet that is now serving Bicolanos to 
enjoy their food, cooked in front of their table.</p> 


</div> 
<div class="image"> 

<img src="PICTURES/template2.png" alt=""> 
</div> 


</div> 
<div class="swiper-slide slide"> 
<div class="content"> 
<span>Want to Celebrate your Birthday or any 
Occasion?</span> 
<h3>We OFFER!!!</h3> 
<p>The best and cheapest deals where you can eat all the meats 
and seafood you want. You will also get unlimited lettuce, pajori salad, kimchi, 
fruits (3 varieties), and dipping sauces such as melted cheese, saamjang paste, 
sweet bbq sauce, and mayonnaise (all home-made) for only 249 php per head. 
</p> 


</div> 
<div class="image"> 
<img src="PICTURES/template3.png" alt=""> 
</div> 
</div> 
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<div class="swiper-slide slide"> 
<div class="content"> 

<span>Come and Visit us at</span> 

<h3>Magsaysay Avenue.</h3> 

<p>ln front of Tapsi Terminal </p> 

<h1>We are Open at 9:00 am to 9:00 pm (cut off time of 
accepting customer)</h1> 

<h2>NOTE: Temporarily Closed for Dine-in Customers, we are 
only accepting deliveries.</h2> 


</div> 
<div class="image"> 
<img src="PICTURES/location.png" alt=""> 
</div> 
</div> 


<div class="swiper-slide slide"> 
<div class="content"> 
<h3>Children below 3 feet: FREE! 
<h3>Children below 4 feet: 50%!</h3> 
<h3>Senior Citizen and PWD: 20%!</h3> 


</div> 
<div class="image"> 
<img src="PICTURES/Voucher.png" alt=""> 
</div> 
</div> 


</div> 
<div class="swiper-pagination"></div> 


</div> 
</section> 
<!-- home section ends--> 


<h1 class="title">latest dishes</h1 > 
<section class="menu" id=""> 


<div class="box-container"> 
<?php 
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$select products = $conn->prepare("SELECT * FROM products” LIMIT 
6"); 
$select products->execute(); 
if($select products->rowCount() > 0)f 
while($fetch products = $select products- 
>fetch(PDO::FETCH_ASSOC)){ 
?> 
<form action="" method="post" class="box"> 
<input type="hidden" name="pid" value="<?= $fetch products['id']; ?>"> 
<input type="hidden" name="name" value="<?= $fetch_products['name’]; 
2>"> 
«input type="hidden" name="price" value="<?= $fetch products['price']; 
2>"> 
<input type="hidden" name="image" value="<?= $fetch products['imageT; 
2>"> 
<a href="quick_view.php?pid=<?= $fetch products['id']; ?>" class="fas fa- 
eye"></a> 
<button type="submit" class="fas fa-shopping-cart <?php 
if($fetch products['category'] == "Not Available' [echo 'disabled';) ?>" 
name="add to cart"></button> 
«img src="uploaded img/<?= $fetch_products['image']; ?>" alt=""> 
<a class="cat"><?= $fetch products['category']; ?></a> 
<div class="name"><?= $fetch products[name']; ?></div> 
<div class="flex"> 
«div class="price"><span>Php</span><?= $fetch products['price']; 
2>.00</div> 
<input type="number" name="qty" class="qty" min="1" max="99" 
value="1" maxlength="2"> 
</div> 
</form> 
<?php 
} 
Jelse( 
echo '«p class="empty">no products added yet!</p>'; 


j 


?> 


</div> 
<div class="more-btn"> 
<a href="menu.php" class="btn">veiw all</a> 
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</div> 
</section> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
<!-- footer section ends --> 
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 
<script src="js/script.js "></script> 
<script> 
var swiper = new Swiper(".home-slider", I 
spaceBetween: 30, 
centeredSlides: true, 
autoplay: { 
delay: 7500, 
disableOnlnteraction: false, 
ha 
pagination: { 
el: ".swiper-pagination", 
clickable: true, 
}, 
loop: true, 
Ir 
</script> 
</Body> 


</html> 


About.php 
<?php 
include 'components/connect.php'; 
session start(); 
if(isset($ SESSION[user id'])) 
$user id = $ SESSION[user id']; 

Jelse( 

$user id ="; 
e 
?> 


<!DOCTYPE html> 
<html lang="en"> 
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<head> 
<meta charset="UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 
<title>Cjzave BBQ & GRILL Official Website</title> 
<link rel="stylesheet" href="https://unpkg.com/swiperQ8/swiper- 
bundle.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<Body> 
<!-- header section starts--> 
<?php include 'components/user header.php'; ?> 
<!-- header section ends--> 
<div class="heading"> 
<h3>About Us</h3> 
<p><a href="index.php">Home</a> <span> / About Us</span></p> 
</div> 
<section class="about" id="about"> 
<div class="row"> 
<div class="image"> 
«img src="PICTURES/template1.png" alt=""> 


</div> 
<div class="content"> 
<h3>We OFFER!!!</h3> 
<p>The best and cheapest deals, where you can eat all the 
meats and seafood you want. You will also get Free for every worth of 500: 
pajori 100g, lettuce 100g, kimchi 100g 
and dipping sauces such as Saamjang sauce, melted cheese 
& Sweet Bbq sauce, all home-made. 
You can enjoy the best tasting Cjzave BBQ & GRILL authentic 
Korean food at the comfort of your home! 
<h3 class="sub-heading "> Price Starts at 249php.</h3> 
</p> 
<div class="icons-container"> 
<div class="icons"> 
<i class="fas fa-peso-sign"></i> 
<span>Affordable</span> 
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</div> 
<div class="icons"> 
<i class="fas fa-utensils"></i> 
<span>Good quality</span> 
</div> 
</div> 
</div> 
</div> 
</section> 
<!-- About section starts--> 
<section class="about" id="about"> 
<h1 class= "ulo"> Our History</h1> 
<div class="row"> 
<div class="image"> 
<img src="PICTURES/cjzave.png" alt=""> 
</div> 
<div class="content"> 
<h3>Cjzave BBQ & GRILL</h3> 
<p>The first Korean-style buffet here in Bicol. Its mission is to serve 
fresh, quality food that is healthy for a reasonable price wherein all Bicolanos 
can appreciate how Korean dishes taste, and their vision is to serve longer than 
15 years. It may be challenging but we will continue to provide excellent service 
and maintain our food quality. It was established on November 20, 2014. 
Located at Zone 15, Magsaysay Avenue, Naga City. Cjzave BBQ & GRILL 
Korean Style Buffet was owned by Mr. Allan Francis O. Alano. The word 
"Cjzave" actually comes from the names of his three children: Cj, Zander, and 
Xavier, and this idea came from his wife.</p> 
<div class="icons-container"> 
<div class="icons"> 
<i class="fas fa-shipping-fast"></i> 
<span>Fast Delivery</span> 
</div> 
<div class="icons"> 
<i class="fas fa-peso-sign"></i> 
<span>Affordable</span> 
</div> 
<div class="icons"> 
<i class="fas fa-utensils"></i> 
<span>Good quality</span> 
</div> 
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</div> 
</div> 
</div> 
</section> 
<!-- About section ends--> 
<!-- review section starts --> 
<section class="review " id="review "> 
<h3 class="ulo"> Customer's Review </h3> 
<h1 class="sub-heading"> What they say: </h1> 
<div class="swiper-container review-slider "> 
<div class="swiper-wrapper "> 
<div class="swiper-slide slide "> 
<i class="fas fa-quote-right "></i> 
<div class="user "> 
<img src="PICTURES/Review 1.jpg " alt=" "> 
<div class="user-info "> 
<h3>Mary Dianne</h3> 
<div class="stars "> 
<i class="fas fa-star "></i> 
<i class="fas fa-star "></i> 
<i class="fas fa-star "></i> 
<i class="fas fa-star "></i> 
<i class="fas fa-star-half-alt "></i> 
</div> 
</div> 
</div> 
<p>Absolutely amazing! 10/10 for every single aspect of this meal, 
and this is coming from the people who knows and loves to eat great food!</p> 
</div> 
<div class="swiper-slide slide "> 
<i class="fas fa-quote-right "></i> 
<div class="user "> 
<img src="PICTURES/Review 2.jpg " alt=" "> 
<div class="user-info "> 
<h3>lvan</h3> 
<div class="stars "> 
<i class="fas fa-star "></i> 
<i class="fas fa-star "></i> 
<i class="fas fa-star "></i> 
<i class="fas fa-star "></i> 
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<i class="fas fa-star-half-alt "></i> 
</div> 
</div> 
</div> 
<p>The service is unmatched. The staff truly cares about the 
experience. The food is absolutely amazing and everything we tasted melted in 
our mouths. Highly recommend!</p> 
</div> 
<div class="swiper-slide slide "> 
<i class="fas fa-quote-right "></i> 
<div class="user "> 
<img src="PICTURES/Review 3.jpg " alt=" "> 
<div class="user-info "> 
<h3>Gabby</h3> 
<div class="stars "> 
<i class="fas fa-star "></i> 
<i class="fas fa-star "></i> 
<i class="fas fa-star "></i> 
<i class="fas fa-star "></i> 
<i class="fas fa-star-half-alt "></i> 
</div> 
</div> 
</div> 
<p>The menu options are an excellent value. The overall 
experience was very pleasant. I highly recommend this restaurant! 
</p> 
</div> 
</div> 
</div> 
</section> 
<!-- review section ends --> 
<!--Start of Tawk.to Script--> 
<script type="text/javascript"> 
var Tawk API=Tawk API||f], Tawk_LoadStart=new Date: 
(function(){ 
var 
s1=document.createElement("script"),sO=document.getElementsByTagName("s 
cript")[0]; 
s1.async=true; 
s1.src='https://embed.tawk.to/648c54bccc26a871b022f331/1h322m0vj'; 
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s1.charset='UTF-8'; 
s1.setAttribute('crossorigin','*”); 
s0.parentNode.insertBefore(s1,s0); 
DO; 
</script> 
<!--End of Tawk.to Script--> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
<!-- footer section ends -->= 
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 
<script src="js/script.js "></script> 
<script> 
var swiper = new Swiper(".review-slider", { 
spaceBetween: 20, 
centeredSlides: true, 
autoplay: { 
delay: 7500, 
disableOnlnteraction: false, 
}, 
loop: true, 
breakpoints: { 
0:{ 
slidesPerView: 1, 
}, 


640: { 
slidesPerView: 2, 

b 

768: { 
slidesPerView: 2, 


), 
1024: { 
slidesPerView: 3, 
} 
j 
ob 
</script> 
</Body> 
</html> 
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Cart.php 

<?php 

include 'components/connect.php'; 

session start(); 

if(isset($ SESSION[user id'])) 
$user id = $ SESSION[user id']; 

Jelse( 
$user id ="; 
header('location:index.php”); 


e 
if(isset($ POST['delete']) 
$cart id = $ POST['cart id]; 
$delete cart item = $conn->prepare("DELETE FROM "cart WHERE id = ?"); 
$delete cart item->execute([$cart id]); 
$message[] = cart item deleted; 


) 
ifisset($ POST['delete all']))( 
$delete cart item = $conn->prepare("DELETE FROM ‘cart WHERE user id 
RE 2"); 
$delete cart item->execute([$user id]); 
// header('location:cart.php”); 
$message[] = ‘deleted all from cart!'; 


ifisset($ POST[update qty'])) 

$cart id = $ POST[cart id]; 

$qty = $ POST['atyT; 

$aty = filter var($qty, FILTER SANITIZE STRING); 

$update qty = $conn->prepare("UPDATE ‘cart SET quantity = ? WHERE id = 
25); 


$update qty->execute([$aty, $cart id]); 
$message[] = cart quantity updated"; 


} 
$grand_total = 0; 
?> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 
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<title>Cjzave BBQ & GRILL Official Website</title> 
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper- 
bundle.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<Body> 
<!-- header section starts--> 
<?php include 'components/user_header.php'; ?> 
<!-- header section ends--> 
<div class="heading"> 
<h3>Shopping Cart</n3> 
<p><a href="index.php">Home</a> <span> / Cart</span></p> 
</div> 
<!-- shopping cart section starts --> 
<section class="menu"> 
<h1 class="title">Your Cart</h1> 
<div class="box-container"> 
<?php 
$grand_total = 0; 
$select cart = $conn-»prepare(" SELECT * FROM "cart WHERE user id = 
2"); 
$select cart->execute([$user id]); 
if($select cart->rowCount() > OY 
while($fetch cart = $select_cart->fetch(PDO::FETCH_ASSOC)){ 
?» 
«form action="" method="post" class="box"> 
<input type="hidden" name="cart_id" value="<?= $fetch cart['id']; ?>"> 
<a href="quick_view.php?pid=<?= $fetch cart['pid']; ?>" class="fas fa- 
eye"></a> 
<button type="submit" class="fas fa-times" name="delete" onclick="return 
confirm('delete this item ?');"></button> 
«img src="uploaded img/<?= $fetch cart['image']; ?>" alt=""> 
<div class="name"><?= $fetch cart['name']; ?></div> 
<div class="flex"> 
«div class="price"><span>Php</span><?= $fetch_cart['price’]; 
?><span>.00</span></div> 
<input type="number" name="qty" class="qty" min="1" max="99" 
value="<?= $fetch cart['quantity']; ?>" maxlength="2"> 
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«button type="submit" class="fas fa-edit" name="update_qty"></button> 
</div> 
<div class="sub-total"> sub total ` <span>Php<?= $sub_total = 
($fetch cart['price'] * $fetch cart['quantity']); ?>.00</span> </div> 
</form> 
<?php 
$grand_total += $sub_total; 
} 
Jelsef 
echo ‘<p class="empty">your cart is empty</p>'; 
> 
</div> 
<div class="cart-total"> 
<p>cart total : <span>Php<?= $grand total; ?>.00</span></p> 
«a href="checkout.php" class="btn <?= ($grand total > 1)?":'disabled'; 
?>">proceed to checkout</a> 
</div> 
<div class="more-btn"> 
<form action="" method="post"> 
<button type="submit" class="delete-btn <?= ($grand_total > 
1)?""disabled'; ?>" name="delete_all" onclick="return confirm('delete all from 
cart?');">delete all</button> 
</form> 
<a href="menu.php" class="btn">continue shopping</a> 
</div> 
</section> 
<!-- shopping cart section ends --> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
<!-- footer section ends --> 
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 


<script src="js/script.js "></script> 


</Body> 
</html> 
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Category.php 
<?php 
include 'components/connect.php'; 
session start(); 
if(isset($_SESSION['user_id'])){ 
$user id = $ SESSION[user id']; 
jelse( 
$user id ="; 
y 
include 'components/add cart.php'; 
?» 
«IDOCTYPE html» 
«html lang="en"> 
<head> 
<meta charset="UTF-8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>category</title> 
<!-- font awesome cdn link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<!-- custom css file link --> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
<?php include 'components/user header.php'; ?> 
<section class="menu"> 
<h1 class="title">food category</h1> 
<div class="box-container"> 
<?php 
$category = $ GET['categoryT; 
$select products = $conn->prepare("SELECT * FROM products WHERE 
category = ?"); 
$select products->execute([$category]); 
if($select products-»rowCount() > 0){ 
while($fetch products = $select products- 
>fetch(PDO::FETCH_ASSOC)){ 
?> 
<form action="" method="post" class="box"> 
<input type="hidden" name="pid" value="<?= $fetch products['id']; ?>"> 
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<input type="hidden" name="name" value="<?= $fetch_products['name’]; 


?>"> 


«input type="hidden" name="price" value="<?= $fetch products['price']; 


?>"> 


«input type="hidden" name="image" value="<?= $fetch products['imageT; 


?>"> 


<a href="quick_view.php?pid=<?= $fetch products['id']; ?>" class="fas fa- 
eye"></a> 
<button type="submit" class="fas fa-shopping-cart" 
name="add to cart"></button> 
«img src-"uploaded img/<?= $fetch_products['image']; ?>" alt=""> 
<div class="name"><?= $fetch products[name']; ?></div> 
<div class="flex"> 
<div class="price"><span>Php</span><?= $fetch products['price']; 
2></div> 
<input type="number" name="qty" class="qty" min="1" max="99" 
value="1" maxlength="2"> 
</div> 
</form> 
<?php 
} 
}else{ 
echo '<p class="empty">no products added yet!</p>'; 
: 
</div> 


</section> 

<?php include 'components/footer.php'; ?> 

«script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script> 
<!-- custom js file link --> 

<script src="js/script.js"></script> 

</body> 

</html> 


104 


Checkout.php 
<?php 
include 'components/connect.php'; 
session start(); 
if(isset($_SESSION['user_id'])){ 
$user id = $ SESSION[user id']; 
Jelse( 
$user id ="; 
header(‘location:index.php’); 


e 

ifisset($ POST['submit']))( 
$name = $ POST[name7; 
$name = filter var($name, FILTER SANITIZE STRING); 
$number = $ POST['number'; 
$number = filter_var($number, FILTER_SANITIZE_STRING); 
$email = $ POST['email']; 
$email = filter var($email, FILTER SANITIZE STRING); 
$method = $ POST['methodT; 
$method = filter var($method, FILTER SANITIZE STRING); 
$address = $ POST['address']; 
$address = filter var($address, FILTER SANITIZE STRING); 
$total products = $ POST['total productsT; 
$amount = $ POST['amount?; 
$msg = $ POST['msg!; 
$msg = filter_var($msg, FILTER_SANITIZE_STRING); 
$check_cart = $conn->prepare("SELECT * FROM "cart WHERE user_id=? "); 
$check cart->execute([$user id]); 
if($check cart->rowCount() > OY 


if($address == "){ 
$message[] = 'please add your address!'; 
Iesel 
$insert order = $conn->prepare("INSERT INTO ‘orders (user id, name, 
number, email, method, address, total_products, amount, message) 


$insert order->execute([$user id, $name, $number, $email, $method, 
$address, $total products, $amount, $msg]); 

$delete cart = $conn->prepare("DELETE FROM cart WHERE user id = 
?"); 

$delete cart->execute([$user id]); 
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$message[] = Order Placed Successfully!'; 
header("Location: process.php"); 
} 
}else{ 
$message[] = ‘Your Cart is Empty’; 
} 
} 


?> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 
<title>Cjzave BBQ & GRILL Official Website</title> 
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper- 
bundle.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<link rel="stylesheet" href="css/style.css"> 
</head> 


<Body> 
<!-- header section starts--> 
<?php include 'components/user header.php'; ?> 
<!-- header section ends--> 
<div class="heading"> 
<h3>checkout</h3> 
<p><a href="index.php">Home</a> <span> / Checkout</span></p> 
</div> 
<!-- header section starts--> 
<section class="checkout"> 
<h1 class="title">Order Summary</h1> 
<form action="" method="post"> 
<div class="cart-items"> 
<h3>Cart items:</h3> 
<?php 
$grand_total = 0; 
$cart items[] ="; 
$select cart = $conn-»prepare("SELECT * FROM "cart WHERE user id = 
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2) 
$select cart->execute([$user id]); 
if($select_cart->rowCount() > OM 
while($fetch cart = $select_cart->fetch(PDO::FETCH_ASSOC)){ 
$cart items[] = $fetch cart['name".' (-$fetch cart['price'].' x '. 
$fetch cart['quantity'].") - '; 
$total products = implode($cart items); 
$amount += ($fetch cart['price'] * $fetch cart['quantity']); 
?» 
<p><span class="name"><?= $fetch cart['name']; ?></span><span 
class="price"><?= $fetch cart['price']; ?» x <?= $fetch cart['quantity']; 
?></span></p> 
<?php 
} 
Jelse( 
echo ‘<p class="empty">your cart is empty!</p>'; 
d 
<p><span class="name">Grand total :</span><span class="amount" 
id="currency" data-type="currency"><?= $amount; ?>.00</span></p> 
<a href="cart.php" class="btn">veiw cart</a> 
</div> 


<input type="hidden" name="total products" value="<?= $total products; 
2>.00"> 


<input type="hidden" name="amount" id="currency" data-type="currency" 
value="<?= $amount; ?>.00" > 

<input type="hidden" name="name" value="<?= $fetch profilefname"] ?>"> 

<input type="hidden" name="number" value="<?= $fetch_profile['number'] 
2>"> 


<input type="hidden" name="email" value="<?= $fetch_profile['email'] ?>"> 
<input type="hidden" name="address" value="<?= $fetch profile['address'] 
2>"> 


<div class="user-info"> 
<h3>your info</h3> 
<p><i class="fas fa-user"></i><span><?= $fetch profile[name"] 
?></span></p> 
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<p><i class="fas fa-phone"></i><span><?= $fetch profile['number" 
?></span></p> 

<p><i class="fas fa-envelope"></i><span><?= $fetch profile[email'] 
?></span></p> 

<a href="update_profile.php" class="btn">update info</a> 

<h3>delivery address</h3> 

<p><i class="fas fa-map-marker-alt"></i><span><?php 
if($fetch profile[address'] == ")fecho Please Enter your Address';}else{echo 
$fetch profile[address'];) ?></span></p> 

<a href="update address.php" class="btn">update address</a> 

<select name="method" class="box" required> 

<option value="G-cash">G-cash</option> 


</select> 


<h3>Special Instruction</h3> 

<h1>Please let us know if you are allergic to anything or if we need to avoid 
anything</h1> 

<textarea name="msg" class="box" placeholder="e.g no peanut" 
maxlength="300" cols="20" rows="10"></textarea> 

<h3>Strictly No Refund!</h3> 

<h1>To avoid hassle on both ends, Please double check your order and 
correct information before placing your order. Thank you !</h1> 


<input type="submit" value="place order" class="btn <?php 
if(Sfetch_profile['address'] == ")fecho 'disabled';) ?>" style="width:100%; 
background:var(--darkred); color:var(--white);" name="submit"> 
</div> 
</form> 


</section> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
<!-- footer section ends --> 
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 


<script src="js/script.js "></script> 


</Body> 
</html> 
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Confirm.php 
<?php 
include 'components/connect.php'; 
session start(); 
if(isset($_SESSION[user_id'])) 
$user id = $ SESSION[user id']; 
Jelsef 
$user_id ="; 
header('location:index.php”); 


b 
ifisset($ POST['submit']))( 
$empty pass = 'da39a3ee5e6b4b0d3255bfef95601 890afd80709'; 
$select prev pass = $conn->prepare("SELECT password FROM "users 
WHERE id = ?"); 
$select_prev_pass->execute([$user_id]); 
$fetch_prev_pass = $select prev pass->fetch(PDO::FETCH ASSOC); 
$new pass = sha1($ POST['new pass"); 
$new_pass = filter_var($new_pass, FILTER_SANITIZE_STRING); 
$confirm_pass = sha1($ POST['confirm pass"); 
$confirm pass = filter var($confirm pass, FILTER SANITIZE STRING); 
if($new pass != $confirm_pass){ 
$message[] = ‘confirm password not matched!'; 
Jelsef 
if$new pass != $empty_pass){ 
$update pass = $conn->prepare("UPDATE ‘users’ SET password = ? 
WHERE id = ?"); 
$update_pass->execute([$confirm_pass, $user id]); 
$message[] = 'password updated successfully!'; 
Jelsef 
$message[] = 'please enter a new password!'; 


header('location:index.php'); 
d 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
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<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 

<title>Cjzave BBQ & GRILL Official Website</title> 

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper- 
bundle.min.css" /> 


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 


<link rel="stylesheet" href="css/style.css"> 
</head> 
<Body> 
<!-- header section starts--> 
<?php include 'components/user_header.php'; ?> 
<!-- header section ends--> 


<section class="form-container"> 
<form action="" method="post"> 
<label for="psw"></label> 
<input type="password" id="psw" name="new_pass" required 
placeholder="enter your new password" class="box" pattern="(?=.*\d)(?=.*[a- 
z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase 
and lowercase letter, and at least 8 or more characters" required> 
<div id="message"> 
<h2>Password must contain the following:</h2> 
<h1 id="letter" class="invalid">A <b>lowercase</b> letter</h1> 
<h1 id="capital" class="invalid">A <b>capital (uppercase)</b> letter</n1> 
<h1 id="number" class="invalid">A <b>number</b></h1> 
<h1 id="length" class="invalid">Minimum <b>8 characters</b></h1> 
</div> 
<input type="password" name="confirm_pass" required 
placeholder="confirm your new password" class="box" maxlength="50" 
oninput="this.value.replace(/\s/g,")"> 


<input type="submit" value="update now" name="submit" class="btn" 
href="index.php"> 
</form> 
</section> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
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<!-- footer section ends --> 

<script> 

var mylnput = document.getElementByld("psw"); 
var letter = document.getElementByld("letter"); 

var capital = document.getElementByld("capital"); 
var number = document.getElementByld("number"); 
var length = document.getElementByld("length"); 


// When the user clicks on the password field, show the message box 
mylnput.onfocus = function() { 
document.getElementByld("message").style.display = "block"; 


// When the user clicks outside of the password field, hide the message box 
mylnput.onblur = function() { 
document.getElementByld("message").style.display = "none"; 


} 


// When the user starts to type something inside the password field 
mylnput.onkeyup = function() { 
// Validate lowercase letters 
var lowerCaseLetters = /[a-z]/g; 
if(mylnput.value.match(lowerCaseLetters)) I 
letter.classList.remove("invalid"); 
letter.classList.add("valid"); 
) else I 
letter.classList.remove("valid"); 
letter.classList.add("invalid"); 


) 


// Validate capital letters 

var upperCaseLetters = /[A-Z]/g; 

if(mylnput.value.match(upperCaseLetters)) ( 
capital.classList.remove("invalid"); 
capital.classList.add("valid"); 

) else I 
capital.classList.remove("valid"); 
capital.classList.add("invalid"); 


) 


// Validate numbers 
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var numbers = /[0-9]/g; 

if(mylnput.value.match(numbers)) { 
number.classList.remove("invalid"); 
number.classList.add(" valid"); 

) else { 
number.classList.remove("valid"); 
number.classList.add("invalid"); 


) 


// Validate length 

if(myInput.value.length >= 8) { 
length.classList.remove("invalid"); 
length.classList.add("valid"); 

} else { 
length.classList.remove("valid"); 
length.classList.add("invalid"); 


) 


</script> 
«script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 
<script src="js/script.js "></script> 

</Body> 

</html> 


Contact.php 
<?php 
include 'components/connect.php'; 
session_start(); 
if(isset($_ SESSION[user id'])) 
$user id = $ SESSION[user id']; 
Jelse( 
$user id ="; 


}; 
if(isset($_POST['send'])){ 
$name = $ POST[name7; 
$name = filter var($name, FILTER SANITIZE STRING); 
$email = $ POST['email']; 
$email = filter var($email, FILTER SANITIZE STRING); 
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$number = $ POST['number"; 
$number = filter var($number, FILTER SANITIZE STRING); 
$msg = $ POST['msg!; 
$msg = filter_var($msg, FILTER_SANITIZE_STRING); 
$select message = $conn->prepare("SELECT * FROM "messages WHERE 
name = ? AND email = ? AND number = ? AND message = ?"); 
$select message->execute([$name, $email, $number, $msg]); 
if($select message-»rowCount() > 0) 
$message[] = 'already sent message; 
Jelsef 
$insert message = $conn->prepare("INSERT INTO ‘messages (user id, 
name, email, number, message) VALUES(?,?,?,?,?)"); 
$insert message->execute([$user id, $name, $email, $number, $msg]); 
$message[] = 'sent message successfully!'; 


) 
) 


?» 
«IDOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset-"UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 
<title>Cjzave BBQ & GRILL Official Website</title> 
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper- 
bundle.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<Body> 
<!-- header section starts--> 
<?php include 'components/user_header.php'; ?> 
<!-- header section ends--> 
<div class="heading"> 
<h3>contact us</h3> 
<p><a href="index.php">Home</a> <span> / Contact</span></p> 
</div> 
<!-- contact section starts --> 
<section class="contact"> 
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<div class="row"> 
<div class="image"> 
<img src="PICTURES/contact-img.svg" alt=""> 
</div> 
<form action="" method="post"> 
<h3>tell us something!</h3> 
<input type="text" name="name" maxlength="50" class="box" 
placeholder="Enter your Name" required> 
<input type="number" name="number" min="0" max="9999999999" 
class="box" placeholder="Enter your Number" required maxlength="10"> 
<input type="email" name="email" maxlength="50" class="box" 
placeholder="Enter your E-mail" required> 
<textarea name="msg" class="box" required placeholder="Enter your 
Message" maxlength="500" cols="30" rows="10"></textarea> 
<input type="submit" value="send message" name="send" 
class="btn"> 
</form> 
</div> 
</section> 
<!-- contact section ends --> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
<!-- footer section ends --> 
<!--Start of Tawk.to Script--> 
<script type="text/javascript"> 
var Tawk_APl=Tawk_API||{}, Tawk_LoadStart=new Date: 
(function(){ 
var 
s1=document.createElement("script"),s0=document.getElementsByTagName("s 
cript")[0]; 
s1.async=true; 
s1.src='https://embed.tawk.to/648c54bccc26a871b022f331/1h322m0vj'; 
s1.charset='UTF-8'; 
s1.setAttribute('crossorigin','*); 
s0.parentNode.insertBefore(s1,s0); 
30; 
</script> 
<!--End of Tawk.to Script--> 
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 
<script src="js/script.js "></script> 
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</Body> 
</html> 


Forgot.php 
<?php 
include 'components/connect.php'; 
session start(); 
ifisset($ SESSION[user id']))( 
$user id = $ SESSION[user id']; 
Jelse( 
$user id ="; 


Y 
ifisset($ POST['submit']))( 
$mother = $ POST['motherT; 
$mother = filter var($mother, FILTER SANITIZE STRING); 
$select user = $conn->prepare("SELECT * FROM "users WHERE mother = 
? ^); 
$select user->execute([$mother]); 
$row = $select user->fetch(PDO::FETCH ASSOC); 
if($select user->rowCount() > 0){ 
$ SESSION[user dl = $row['id']; 
header('location:confirm.php'); 
jelse( 
$message[] = ‘incorrect mothers name; 
) 
} 
?> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 
<title>Cjzave BBQ & GRILL Official Website</title> 
<link rel="stylesheet" href="https://unpkg.com/swiperQ8/swiper- 
bundle.min.css" /> 


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
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<link rel="stylesheet" href="css/style.css"> 
</head> 
<Body> 
<!-- header section starts--> 
<?php include 'components/user header.php'; ?> 
<!-- header section ends--> 
<!-- header section ends--> 
<section class="form-container"> 
<form action="" method="post"> 
<h3>Forgot password?</h3> 
<input type="text" name="mother" required placeholder="enter your 
mother's name" class="box" maxlength="50" 
oninput="this.value.replace(/\s/g,")"> 
<br style="clear: both;"> 
<input type="submit" value="confirm" name="submit" class="btn" 
href="confirm.php"> 
</form> 
</section> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
<!-- footer section ends --> 
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 
<script src="js/script.js "></script> 
</Body> 
</html> 


Login.php 
<?php 
include 'components/connect.php'; 
session_start(); 
if(isset($ SESSION[user id']) 
$user id= $ SESSION[user id']; 
Jelsef 
$user_id ="; 


e 

ifisset($ POST['submit']))( 
$email = $ POST['email']; 
$email = filter var($email, FILTER SANITIZE STRING); 
$pass = sha1($ POST['pass']); 
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$pass = filter var($pass, FILTER SANITIZE STRING); 
$select user = $conn->prepare("SELECT * FROM "users WHERE email = ? 
AND password = ?"); 
$select user->execute([$email, $pass]); 
$row = $select user->fetch(PDO::FETCH ASSOC); 
if($select user-»rowCount() > 0)( 
$ SESSION[user id] = $row['"id']; 
header('location:index.php”); 
selse{ 
$message[] = ‘incorrect username or password!'; 
} 
} 


?> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 
<title>Cjzave BBQ & GRILL Official Website</title> 
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper- 
bundle.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<Body> 
<!-- header section starts--> 
<?php include 'components/user_header.php'; ?> 
<!-- header section ends--> 
<!-- header section ends--> 
<section class="form-container"> 
<form action="" method="post"> 
<h3>login now</h3> 
<input type="email" name="email" required placeholder="enter your 
email" class="box" maxlength="50" oninput="this.value.replace(/\s/g,")"> 
<input type="password" name="pass" required placeholder="enter your 
password" class="box" maxlength="50" oninput="this.value.replace(/\s/g,")"> 
<br style="clear: both;"> 
<input type="submit" value="login now" name="submit" class="btn"> 
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<a href="forgot.php" class="btn">Forgot Password</a> 
</form> 

</section> 
<?php include 'components/footer.php'; ?> 

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 

<script src="js/script.js "></script> 
</Body> 
</html> 


Menu.php 
<?php 
include 'components/connect.php'; 
session_start(); 
if(isset($ SESSION[user id']) 

$user id= $ SESSION[user id']; 
Jelsef 

$user id="; 

y 
include 'components/add cart.php'; 
?» 
«IDOCTYPE html» 
«html lang="en"> 
<head> 

<meta charset="UTF -8"> 

«meta http-equiv="X-UA-Compatible" content="lE=edge"> 

<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 

<title>Cjzave BBQ & GRILL Official Website</title> 

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper- 
bundle.min.css" /> 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 

<link rel="stylesheet" href="css/style.css"> 
</head> 
<Body> 
<!-- header section starts--> 
<?php include 'components/user_header.php'; ?> 
<!-- header section ends--> 
<div class="heading"> 
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<h3>Our Menu</h3> 
<p><a href="index.php">Home</a> <span> / Menu</span></p> 
</div> 
<!-- take out section starts--> 
<section class="menu" id="menu"> 
<h1 class="ulo">"You will get Free for every worth of 500 pesos: Pajori 
100g, Lettuce 100g, Kimchi 100g and Dipping Sauces such as Saamjang 
Sauce, Melted Cheese & Sweet BBQ sauce are all home-made."</h1> 
<div class="box-container"> 
<?php 
$select products = $conn->prepare("SELECT * FROM "products "); 
$select_products->execute(); 
if($select_products->rowCount() > 0) 
while($fetch products = $select products- 
>fetch(PDO::FETCH_ASSOC)){ 
?> 
<form action="" method="post" class="box"> 
<input type="hidden" name="pid" value="<?= $fetch products['id']; ?>"> 
<input type="hidden" name="name" value="<?= $fetch_products['name’]; 
2>"> 
<input type="hidden" name="price" value="<?= $fetch products['price']; 
2>"> 
<input type="hidden" name="image" value="<?= $fetch products['imageT; 
2>"> 
<a href="quick_view.php?pid=<?= $fetch products['id']; ?>" class="fas fa- 
eye"></a> 
<button type="submit" class="fas fa-shopping-cart <?php 
if($fetch products['category'] == "Not Available'){echo 'disabled';) ?>" 
name="add_to_cart"></button> 
«img src="uploaded_img/<?= $fetch_products['image']; ?>" alt=""> 
<a class="cat"><?= $fetch_products['category']; ?></a> 
<div class="name"><?= $fetch products['name']; ?></div> 
<div class="flex"> 
«div class="price"><span>Php </span><?= $fetch products['price']; 
?><span>.00</span></div> 
<input type="number" name="qty" class="qty" min="1" max="10" 
value="1" maxlength="2"> 
</div> 
</form> 
<?php 
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} 
Jelsef 
echo ‘<p class="empty">no products added yet!</p>'; 
» 
</div> 
</section> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
<!-- footer section ends --> 
«script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 
<script src="js/script.js "></script> 
</Body> 
</html> 


Orders.php 
<?php 
include 'components/connect.php'; 
//require_once(‘vendor/autoload.php'); 
//$client = new \GuzzleHttp\Client(); 
//$response = $client->request('GET', 
'https://api.paymongo.com/v1/payments?limit=1', [ 
//'headers' => [ 
/l' Accept' => 'application/json', 
/l' Authorization' => 'Basic 
c2tfbGI2ZV9HVnRSbTQ1NFA1c2s2NmYyTGHjS2bEyMkA6', // secret live 
// 'Authorization' => 'Basic 
c2tfdGVzdF9Qb1k1 VnNFR38djdU4zREdjanJTOWtCd2Q6', // secret not live 
i), 
IN); 
//$data = json decode($response->getBody(), true); 
//$hello = $data['data']['0"]['id']; 
//$hi = $data['data']['O']['attributes']'source']['id7]; 
//$r = $conn->prepare("UPDATE orders SET paid_transaction= ? WHERE 
transaction_id= ?"); 
//$r->execute([$hello, $hi]); 
session_start(); 
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if(isset($_SESSION['user_id'])){ 
$user id = $ SESSION[user id']; 
Jelsef 
$user_id ="; 
header(‘location:index.php’); 
a 
«IDOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset="UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 
<title>Cjzave BBQ & GRILL Official Website</title> 
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper- 
bundle.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<Body> 
<!-- header section starts--> 
<?php include 'components/user header.php'; ?> 
<!-- header section ends--> 
<div class="heading"> 


<h3>Orders</h3> 
<p><a href="index.php">Home</a> <span> / Orders</span></p> 
</div> 


<section class="orders"> 

«h1 class="title">Your orders</h1> 
<div class="box-container"> 
<?php 

if($user id == "| 
echo '<p class="empty">Please ogin to see your orders</p>'; 

Jelsef 
$select orders = $conn->prepare("SELECT * FROM ‘orders’ WHERE 

user_id = ?"); 
$select orders->execute([$user id ]); 
if($select_orders->rowCount() > 0){ 
while($fetch_orders = $select_orders->fetch(PDO::FETCH_ASSOC)){ 
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?> 
<div class="box"> 
<p>Placed on : <span><?= $fetch_orders['placed_on']; ?></span></p> 
<p>Name : <span><?= $fetch orders[name']; ?></span></p> 
<p>E-mail : <span><?= $fetch orders['email]; ?></span></p> 
<p>Contact Number ` <span><?= $fetch orders[number']; ?></span></p> 
<p>Address : <span><?= $fetch_orders['address']; ?></span></p> 
<p>Payment Method ` <span><?= $fetch orders[method']; ?></span></p> 
<p>Orders ` <span><?= $fetch_orders['total_products']; ?></span></p> 
<p>Total Price : <span>Php<?= $fetch_orders['amount']; ?></span></p> 
<p>Special Instruction ` <span><?= $fetch_orders['message']; ?>/- 
</span></p> 
<p> Order Status : <span style="color:<?php 
if($fetch_orders['payment_status'] == 'Preparing'){ echo 'red'; }else{ echo green: 
}; 2>"><?= $fetch_orders['payment_status']; ?></span> </p> 
</div> 
<?php 
} 
jelse( 
echo '<p class="empty">No orders placed yet!</p>'; 
) 
) 
?» 
</section> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
<!-- footer section ends --> 
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 
<script src="js/script.js "></script> 
</Body> 
</html> 


Process.php 
<?php 
include 'components/connect.php'; 
session_start(); 
$user id = $ SESSION[user id']; 
$x=$conn->prepare("SELECT amount FROM orders WHERE user id= ?"); 
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$x->execute([$user id]); 
if($x->rowcount()>0){ 
while($fetch = $x->fetch(PDO ::FETCH_ASSOC)){ 
$price=$fetch['amount'); 
} 
} 


require_once('vendor/autoload.php”); 
$client = new \GuzzleHttp\Client(); 
function clean($string){ 

$string = str_replace('', ", $string); 


$string = str_replace('.', ", $string); 
return preg_replace('/[*A-Za-z0-9-]/, 


, $string); 


try { 
$value = $price; 
$amount = clean($value); 
$response = $client->request('POST', 'https://api.paymongo.com/v1/sources', [ 
'body' => '{"data":{"attributes":{"amount":' 
$amount.',"redirect":{"success":"https://cjzave.com/success.php","failed":"https:// 
cjzave.com/failed.php"},"type":"gcash","currency":"PHP"}}}', 
‘headers’ => [ 
'accept' => 'application/json', 
‘authorization’ => 'Basic 
cGtfbGl2Z2V9FNUNIMXICYnITYmZnRONwSkxYUEBBSjl6', // puclic live 
/l'authorization' => 'Basic 
cGtfdGVzdF90eThXVERRUOxneFFxWnRtU1 VSUHJhQjg6', // public not live 
'content-type' => 'application/json', 
L 
D: 
$data = json decode($response->getBody() , true); 
$hello=$data['data J['id']; 
$user id=$ SESSION[user id; 
$hi = $conn->prepare("UPDATE orders SET transaction id= ? WHERE 
user id= ?"); 
$hi->execute([$hello, $user id]); 
$redirect = $data['data'|[attributes']| redirect'] checkout. url]; 
echo "Redirecting in 3 seconds.."; 
header('Refresh: 3;URL=".$redirect); 
} catch (GuzzleHttp\Exception\ClientException $e) { 
$response = $e->getResponse(); 
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$responseBodyAsString = $response->getBody()->getContents(); 
$error = json decode($responseBodyAsString, true); 
print r(Serror['errors'|[O]| detail"); 


Profile.php 
<?php 
include 'components/connect.php'; 
session_start(); 
ifisset$ SESSION[user id'])) 
$user id = $ SESSION[user id']; 
Jelse( 
$user id ="; 
header(location:index.php); 
IL 
?> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 
<title>Cjzave BBQ & GRILL Official Website</title> 
<link rel="stylesheet" href="https://unpkg.com/swiperQ8/swiper- 
bundle.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<Body> 
<!-- header section starts--> 
<?php include 'components/user header.php'; ?> 
<!-- header section ends--> 
<!-- header section ends--> 
<section class="user-details"> 
<div class="user"> 
<?php 


?> 


124 


<img src="PICTURES/user-icon.png" alt=""> 
<p><i class="fas fa-user"></i><span><span><?= $fetch profile['name'; 
2></span></span></p> 
<p><i class="fas fa-phone"></i><span><?= $fetch_profile['number’); 
?></span></p> 
<p><i class="fas fa-envelope"></i><span><?= $fetch  profile['email']; 
?></span></p> 
<a href="update_profile.php" class="btn">update info</a> 
<p class="address"><i class="fas fa-map-marker-alt"></i><span><?php 
if($fetch_profile['address'] == "){echo 'please enter your address';}else{echo 
$fetch profilel'address'];] ?></span></p> 
«a href="update_address.php" class="btn">update address</a> 
</div> 
</section> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
<!-- footer section ends --> 
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 
<script src="js/script.js "></script> 
</Body> 
</html> 


Quick_view.php 
<?php 
include 'components/connect.php'; 
session_start(); 
if(isset($_ SESSION['user_id'])){ 
$user id = $ SESSION[user id']; 
Jelsef 
$user id="; 
e 
include 'components/add_cart.php'; 
?> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
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<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>quick view</title> 
<!-- font awesome cdn link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<!-- custom css file link --> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
<?php include 'components/user_header.php'; ?> 
<section class="quick-view"> 
<h1 class="title">quick view</h1> 
<?php 
$pid = $ GET['pid!; 
$select products = $conn->prepare("SELECT * FROM "products WHERE 
id = ?"); 
$select products->execute([$pid]); 
if($select products->rowCount() > 0) 
while($fetch products = $select products->fetch(PDO::FETCH ASSOG) 
?> 
<form action="" method="post" class="box"> 
<input type="hidden" name="pid" value="<?= $fetch products['id']; ?>"> 
<input type="hidden" name="name" value="<?= $fetch products['nameT; 
2>"> 
<input type="hidden" name="price" value="<?= $fetch products[price']; ?>"> 
<input type="hidden" name="image" value="<?= $fetch_products|'image’; 
2>"> 
«img src-"uploaded img/«?- $fetch products['image']; ?>" alt=""> 
<a class="cat"><?= $fetch products['category']; ?></a> 
<div class="name"><?= $fetch_products['name']; ?></div> 
<div class="name"><span>-</span><?= $fetch_products|'parts']; ?></div> 
<div class="flex"> 
<div class="price"><span>Php</span><?= $fetch products['price']; 
2></div> 
<input type="number" name="qty" class="qty" min="1" max="10" value="1" 
maxlength="2"> 
</div> 
<button type="submit" name="add_to_cart" class="cart-btn <?php 
if($fetch products['category'] == "Not Available")(echo 'disabled';) ?>">add to 
cart</button> 
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</form> 
<?php 
} 


Jelsef 
echo '<p class="empty">no products added yet!</p>'; 
} 
?> 

</section> 
<?php include 'components/footer.php'; ?> 
«script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script> 
<!-- custom js file link --> 
<script src="js/script.js"></script> 
</body> 
</html> 


Register.php 
<?php 
include 'components/connect.php'; 
session start(); 
if(isset($_SESSION['user_id'])){ 
$user id = $ SESSION[user id']; 
Jelsef 
$user_id ="; 


i 

ifisset($ POST['submit']))( 
$name = $ POST[name7; 
$name = filter var($name, FILTER SANITIZE STRING); 
$email = $ POST['email']; 
$email = filler var($email, FILTER SANITIZE STRING); 
$number = $ POST[numberT; 
$number = filter var($number, FILTER SANITIZE STRING); 
$psw = sha1($ POST[psw'); 
$psw - filter var($psw, FILTER SANITIZE STRING); 
$cpass = sha1($ POST['cpass']); 
$cpass - filter var($cpass, FILTER SANITIZE STRING); 
$mother - $ POST['motherT; 
$mother = filter var($mother, FILTER SANITIZE STRING); 
$select user = $conn-»prepare(" SELECT * FROM "users WHERE email = ? 
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OR number = ?"); 
$select user->execute([$email, $number]); 
$row = $select user->fetch(PDO::FETCH ASSOC); 
if($select user->rowCount() > OY 
$message[] = ‘email or number already exists!'; 
Jelsef 
if($psw != $cpass){ 
$message[] = ‘confirm password not matched!'; 
Jelsef 
$insert user = $conn->prepare("INSERT INTO "users (name, email, 
number, password , mother) VALUES(?,?,?,?,?)"); 
$insert user->execute([$name, $email, $number, $cpass , $mother]); 
$select user = $conn->prepare("SELECT * FROM ‘users’ WHERE email 
= ? AND password = ?"); 
$select user->execute([$email, $psw]); 
$row = $select user->fetch(PDO::FETCH ASSOG); 
if($select user-»rowCount() > 0){ 
$ SESSION[user id'] = $row['id']; 
header('location:index.php”); 
} 
} 
} 
} 
?> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 
<title>Cjzave BBQ & GRILL Official Website</title> 
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper- 
bundle.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<link rel="stylesheet" href="css/style.css"> 
<style> 
/* Chrome, Safari, Edge, Opera */ 
input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button { 
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-webkit-appearance: none; 
margin: 0; 


} 

/* Firefox */ 

input[type=number] { 
-moz-appearance: textfield; 


</style> 
</head> 
<Body> 
<!-- header section starts--> 
<?php include 'components/user_header.php'; ?> 
<!-- header section ends--> 
<br><br><br><br> 
<!-- header section ends--> 
<section class="form-container"> 
<form action="" method="post"> 
<h3>register now</h3> 
<input type="text" name="name" required placeholder="enter your 
name" class="box" maxlength="50" oninput="this.value.replace(/\s/g,")"> 
<input type="email" name="email" required placeholder="enter your 
email" class="box" maxlength="50" oninput="this.value.replace(/\s/g,")"> 
<input type="text" name="number" value="+63" required 
placeholder="enter your number" class="box" minlength="13" maxlength="13" 
required > 
<h4>Incase you forgot your password</h4> 
<h5>Enter your Mother's name</h5> 
<input type="text" name="mother" required placeholder="enter your 
Mother's name" class="box" maxlength="50" 
oninput="this.value.replace(/\s/g,")"> 
</div> 
<label for="psw"></label> 
<input type="password" id="psw" name="psw" required placeholder="enter 
your password" class="box" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
title="Must contain atleast one number and one uppercase and lowercase letter. 
Have atleast 8 or more characters" required> 
<div id="message"> 
<h2>Password must contain the following:</h2> 
<h1 id="letter" class="invalid">A <b>lowercase</b> letter</h1> 
<h1 id="capital" class="invalid">A <b>capital (uppercase)</b> letter</h1> 
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<h1 id="number" class="invalid">A <b>number</b></h1> 
<h1 id="length" class="invalid">Minimum <b>8 characters</b></h1> 
</div> 
<input type="password" name="cpass" required placeholder="confirm 
your password" class="box" maxlength="50" 
oninput="this.value.replace(/\s/g,")"> 
<input type="submit" value="register now" name="submit" class="btn"> 
<p>already have an account? <a href="login.php">login now</a></p> 
</form> 
</section> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
<!-- footer section ends --> 
<script> 
var mylnput = document.getElementByld("psw"); 
var letter = document.getElementByld("letter"); 
var capital = document.getElementByld("capital"); 
var number = document.getElementByld("number"); 
var length = document.getElementByld("length"); 
// When the user clicks on the password field, show the message box 
mylnput.onfocus = function() { 
document.getElementByld("message").style.display = "block"; 


// When the user clicks outside of the password field, hide the message box 
mylnput.onblur = function() { 
document.getElementByld("message").style.display = "none"; 


// When the user starts to type something inside the password field 
mylnput.onkeyup = function() { 
// Validate lowercase letters 
var lowerCaseLetters = /[a-z]/g; 
if(myInput.value.match(lowerCaseL etters)) I 
letter.classList.remove("invalid"); 
letter.classList.add("valid"); 
) else I 
letter.classList.remove("valid"); 
letter.classList.add("invalid"); 


// Validate capital letters 
var upperCaseLetters = /[A-Z]/g; 
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if(mylnput.value.match(upperCaseLetters)) ( 
capital.classList.remove("invalid"); 
capital.classList.add("valid"); 

) else I 
capital.classList.remove("valid"); 
capital.classList.add("invalid"); 


// Validate numbers 

var numbers = /[0-9]/g; 

if(mylnput.value.match(numbers)) { 
number.classList.remove("invalid"); 
number.classList.add("valid"); 

) else I 
number.classList.remove("valid"); 
number.classList.add("invalid"); 


) 

// Validate length 

if(myInput.value.length >= 8) { 
length.classList.remove("invalid"); 
length.classList.add("valid"); 

) else I 
length.classList.remove("valid"); 
length.classList.add("invalid"); 


) 


</script> 
«script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 
<script src="js/script.js "></script> 

</Body> 

</html> 


Search.php 

<?php 

include 'components/connect.php'; 

session_start(); 

if(isset($ SESSION[user id']) 
$user id= $ SESSION['user id; 

Jelsef 
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$user_id ="; 
h 
include 'components/add cart.php'; 
?» 
«IDOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset-"UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 
<title>Cjzave BBQ & GRILL Official Website</title> 
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper- 
bundle.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<Body> 
<!-- header section starts--> 
<?php include 'components/user header.php'; ?> 
<!-- header section ends--> 
<!-- search form--> 
<section class="search-form"> 
<form method="post" action=""> 
<input type="text" name="search box" placeholder="search here..." 
class="box"> 
«button type="submit" name="search btn" class="fas fa- 
search"></button> 
</form> 
</section> 
<section class="menu" style="min-height: 100vh; padding-top:0;"> 
<div class="box-container"> 
<?php 
if(isset($ POST['search box") OR isset($ _POST['search_btn"]))( 
$search_box = $ POST['search box]; 
$select products = $conn-»prepare(" SELECT * FROM "products WHERE 
name LIKE '%($search box)%"); 
$select_products->execute(); 
if($select_products->rowCount() > OM 
while($fetch_products = $select_products- 
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>fetch(PDO::FETCH_ASSOC)){ 
?> 
<form action="" method="post" class="box"> 
<input type="hidden" name="pid" value="<?= $fetch products['id']; ?>"> 
<input type="hidden" name="name" value="<?= $fetch_products['name’]; 


2>"> 
<input type="hidden" name="price" value="<?= $fetch products['price']; 
2>"> 
<input type="hidden" name="image" value="<?= $fetch products['imageT; 
2>"> 
<a href="quick_view.php?pid=<?= $fetch products['id']; ?>" class="fas fa- 
eye"></a> 
<button type="submit" class="fas fa-shopping-cart <?php 
if($fetch products['category'] == "Not Available' [echo 'disabled';) ?>" 
name="add to cart"></button> 
<img src-"uploaded img/<?= $fetch_products['image']; ?>" alt=""> 
<a href="category.php?category=<?= $fetch products['category']; ?>" 
class="cat"><?= $fetch products['category']; ?></a> 
<div class="name"><?= $fetch_products['name’]; ?></div> 
<div class="flex"> 
«div class="price"><span>Php</span><?= $fetch products['price']; 
2></div> 
<input type="number" name="qty" class="qty" min="1" max="99" 
value="1" maxlength="2"> 
</div> 
</form> 
<?php 
} 
Jelsef 
echo ‘<p class="empty">No products added yet!</p>'; 
} 
} 
?> 
</div> 
</section> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
<!-- footer section ends --> 
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 
<script src="js/script.js "></script> 


133 


</Body> 
</html> 


Success.php 

<?php 

header('Refresh:30;URL= wait.php”); 
?> 

<style type="text/css"> 

ækeyframes Idio-vu9dkOgeb9 { 

0% { transform: translate(13.37px,78.31px) scale(0); } 
25% { transform: translate(13.37px,78.31px) scale(0); } 
50% I transform: translate(13.37px,78.31px) scale(1); } 
75% I transform: translate(78.31px,78.31px) scale(1); } 
100% { transform: translate(143.25px, 78.31 px) scale(1); } 

} 
@keyframes Idio-vu9dkOgeb9-r { 

0% I transform: translate(143.25px,78.31px) scale(1); } 
100% { transform: translate(143.25px, 78.31 px) scale(0); } 


} 

@keyframes ldio-vu9dk0geb9-c { 
0% { background: #e15b64 } 
25% I background: #abbd8 1 } 
50% { background: #f8b26a } 
75% I background: #f47e60 } 

100% { background: #e15b64 } 


} 

.Idio-vu9dkOgeb9 div { 
position: absolute; 
width: 34.379999999999995px; 
height: 34.379999999999995px; 
border-radius: 50%; 
transform: translate(78.31px,78.31px) scale(1); 
background: #e15b64; 


animation: Idio-vu9dkOgeb9 2.8571428571428568s infinite cubic- 
bezier(0,0.5,0.5,1); 


} 
.Idio-vu9dkOgeb9 div:nth-child(1) I 
background: #f47e60; 
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transform: translate(143.25px,78.31px) scale(1); 

animation: Idio-vu9dkOgeb9-r 0.7142857142857142s infinite cubic- 
bezier(0,0.5,0.5,1), Idio-vu9dkOgeb9-c 2.8571428571428568s infinite step-start; 
).Idio-vu9dkOgeb9 div:nth-child(2) { 

animation-delay: -0.7142857142857142s; 

background: #e15b64; 
).Idio-vu9dkOgeb9 div:nth-child(3) { 

animation-delay: -1.4285714285714284s; 

background: #f47e60; 
).Idio-vu9dkOgeb9 div:nth-child(4) { 

animation-delay: -2.142857142857143s; 

background: #f8b26a; 
).Idio-vu9dkOgeb9 div:nth-child(5) { 

animation-delay: -2.8571428571428568s; 

background: ttabbd81; 


.Joadingio-spinner-ellipsis-kl62793hx7h { 
width: 191 px; 
height: 191 px; 
display: inline-block; 
overflow: hidden; 
background: #ffffff; 


} 

.Idio-vu9dkOgeb9 { 
width: 100%; 
height: 100%; 
position: relative; 
transform: translateZ(0) scale(1); 
backface-visibility: hidden; 
transform-origin: O 0; /* see note above */ 


} 
.Idio-vu9dkOgeb9 div { box-sizing: content-box; } 
/* generated by https://loading.io/ */ 
</style> 
<div class= "py-5"> 
<div class="container" align="center" > 
<div class=""> 
<div class="col-md-3 "> 
<div class="display-order col-md-6 mb-3 "> 
</div> 
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<div class="card"> 

<div class="card-header"> 

<label for="">Redirecting in 30 seconds.. Please don't close while 
redirecting. Thank You!</label> 

</div> 

<div class="card-body"> 

<div class=" loadingio-spinner-ellipsis-kl62793hx7h"><div class="Idio- 

vu9dkOgeb9"> 
<div></div><div></div><div></div><div></div><div></div> 


Update_address.php 
<?php 
include 'components/connect.php'; 
session_start(); 
if(isset($_ SESSION[user id'])) 
$user id = $ SESSION[user id']; 
Jelse( 
$user id ="; 
header('ocation:index.php'); 


} 
if(isset($ POST['submit']))( 
$address = $ POST[flat'] 
.,.$ POSTT['street'].''.$ POST['building'|.','.$ POST[areaT; 
$address = filter var($address, FILTER SANITIZE STRING); 
$update address = $conn->prepare("UPDATE ‘users’ set address = ? 
WHERE id = ?"); 
$update address->execute([$address, $user id]); 
$message[] = "address saved!'; 


?> 
<!DOCTYPE html> 
<html lang="en"> 


<head> 
<meta charset="UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 
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<title>Cjzave BBQ & GRILL Official Website</title> 
<link rel="stylesheet" href="https://unpkg.com/swiperQ8/swiper- 
bundle.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<Body> 
<!-- header section starts--> 
<?php include 'components/user_header.php'; ?> 
<!-- header section ends--> 
<!-- header section starts--> 
<!-- header section ends--> 
<section class="form-container"> 
<form action="" method="post"> 
<h3>your address</h3> 
<h1>Applicable with in Naga only!</n1> 
<input type="number" class="box" placeholder="Building or House No. 
maxlength="50" name="flat"> 
<input type="text" class="box" placeholder="Street Name" required 
maxlength="50" name="street"> 
<select name="building" class="box" required> 
<option value="" disabled selected>Barangay--</option> 
<option value="Abella">Abella</option> 
<option value="Bagumbayan Norte">Bagumbayan Norte</option> 
<option value="Bagumbayan Sur">Bagumbayan Sur</option> 
<option value="Balatas">Balatas</option> 
<option value="Calauag">Calauag</option> 
<option value="Cararayan">Cararayan</option> 
<option value="Carolina">Carolina</option> 
<option value="Concepcion Grande">Concepcion Grande</option> 
<option value="Concepcion Pequeña">Concepcion Pequena</option> 
<option value="Dayangdang">Dayangdang</option> 
<option value="Del Rosario">Del Rosario</option> 
<option value="Dinaga">Dinaga</option> 
<option value="Igualdad Interior">Igualdad Interior</option> 
<option value="Lerma">Lerma</option> 
<option value="Liboton">Liboton</option> 
<option value="Mabolo">Mabolo</option> 
<option value="Pacol">Pacol</option> 
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<option value="Paniquason">Paniquason</option> 
<option value="Penafrancia">Penafrancia</option> 
<option value="Sabang">Sabang</option> 
<option value="San Felipe">San Felipe</option> 
<option value="San Francisco">San Francisco</option> 
<option value="San Isidro">San Isidro</option> 
<option value="Sta. Cruz">Sta. Cruz</option> 
<option value="Tabuco">Tabuco</option> 
<option value="Tinago">Tinago</option> 
<option value="Triangulo">Triangulo</option> 
<input type="text" class="box" placeholder="Land Mark" required 
maxlength="50" name="area"> 
<input type="submit" value="save address" name="submit" class="btn"> 
<a href="checkout.php" class="btn">go back</a> 
</form> 
</section> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
<!-- footer section ends --> 
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 
<script src="js/script.js "></script> 
</Body> 
</html> 


Update_profile.php 

<?php 

include 'components/connect.php'; 

session_start(); 

if(isset($_ SESSION['user_id'])){ 
$user id = $ SESSION['user_id"]; 

Jelsef 
$user id="; 
header('location:index.php'); 


di 

ifisset($ POST['submit']))( 
$name = $ POST[name7; 
$name = filter var($name, FILTER SANITIZE STRING); 
$email = $ POST['email']; 
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$email = filter var($email, FILTER SANITIZE STRING); 
$number = $ POST['number"; 
$number = filter_var($number, FILTER_SANITIZE_STRING); 
if(lempty($name))( 
$update name = $conn->prepare("UPDATE ‘users’ SET name = ? WHERE 
id = ?"); 
$update name->execute([$name, $user id]); 


) 
if(lempty($email) 
$select email = $conn->prepare("SELECT * FROM ‘users’ WHERE email = 
2"); 
$select email->execute([$email]); 
if($select email->rowCount() > 0){ 
$message[] = 'Email Already Taken!'; 
Jelsef 
$update email = $conn->prepare("UPDATE ‘users’ SET email = ? 
WHERE id = ?"); 
$update email->execute([$email, $user id]); 


) 


) 
if(!empty($number)){ 
$select number = $conn->prepare("SELECT * FROM "users WHERE 
number = ?"); 
$select number->execute([$number]); 
if($select number->rowCount() > 0) 
$message[] = "Number Already Taken!'; 
Jelsef 
$update number = $conn->prepare("UPDATE ‘users’ SET number = ? 
WHERE id = ?"); 
$update number->execute([$number, $user id]); 
} 


} 
$empty pass = 'da39a3ee5e6b4b0d3255bfef95601 890afd80709'; 


$select prev pass = $conn->prepare("SELECT password FROM ‘users’ 
WHERE id = ?"); 

$select_prev_pass->execute([$user_id]); 

$fetch prev pass = $select prev pass->fetch(PDO::FETCH ASSOC); 

$prev pass = $fetch prev pass['password"]; 

$old pass = sha1($ POST['0ld pass"); 

$old pass = filter var($old pass, FILTER SANITIZE STRING); 
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$new pass = sha1($ POST['new pass"); 
$new pass = filter var($new pass, FILTER SANITIZE STRING); 
$confirm pass = sha1($ POST['confirm pass"); 
$confirm pass = filter var($confirm pass, FILTER SANITIZE STRING); 
if($old pass != $empty pass) 
if($old pass !- $prev pass)( 
$message[] = 'Old Password not Matched!'; 
Jelseif($new pass != $confirm pass) 
$message[] = 'Confirm Password not Matched!'; 
Jelsef 
if$new pass !- $empty_pass){ 
$update pass = $conn->prepare("UPDATE ‘users’ SET password = ? 
WHERE id = ?"); 
$update_pass->execute([$confirm_pass, $user id]); 
$message[] = 'Password Updated Successfully!'; 
Jelse( 
$message[] = 'Please Enter a New Password"; 
} 
} 
} 
} 
?> 
<!DOCTYPE html» 
<html lang="en"> 
<head> 
<meta charset="UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 
<title>Cjzave BBQ & GRILL Official Website</title> 
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper- 
bundle.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<Body> 
<!-- header section starts--> 
<?php include 'components/user header.php'; ?> 
<!-- header section ends--> 
<section class="form-container"> 
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<form action="" method="post"> 
<h3>update profile</h3> 
<<input type="text" name="name" placeholder="<?= 
$fetch profile['name"; ?>" class="box" maxlength="50"> 
«input type="email" name="email" placeholder="<?= $fetch profile[email']; 
2>" class="box" maxlength="50" oninput="this.value = this.value.replace(As/g, 
KÉ 
<input type="text" name="number" value="+63" placeholder="<?= 
$fetch profile[number']; ?>"" class="box" minlength="13" maxlength="13"> 
<input type="password" name="old_pass" placeholder="enter your old 
password" class="box" maxlength="50" oninput="this.value = 
this.value.replace(/\s/g, ")"> 
<input type="password" name="new pass" placeholder="enter your new 
password" class="box" maxlength="50" oninput="this.value = 
this.value.replace(/\s/g, ")"> 
<input type="password" name="confirm_pass" placeholder="confirm your 
new password" class="box" maxlength="50" oninput="this.value = 
this.value.replace(/\s/g, ")"> 
<input type="submit" value="update now" name="submit" class="btn"> 
</form> 
</section> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
<!-- footer section ends --> 
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js "></script> 
<script src="js/script.js "></script> 
</Body> 
</html> 


Wait.php 
<?php 
include 'components/connect.php'; 
require_once('vendor/autoload.php”); 
$client = new \GuzzleHttp\Client(); 
$response = $client->request('GET', 
'https://api.paymongo.com/v1/payments?limit=1', [ 
'headers' => [ 
'Accept => 'application/json', 
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‘Authorization’ => 'Basic 
c2tioGl2ZV9HVnRSbTQ1NFA1c2s2NmYyTGRjS2EyMk46', // secret live 
// 'Authorization' => 'Basic 
c2tfdGVzdF9Qb1k1 VnNFR38djdU4zREdjanJTOWtCd2Q6', // secret not live 
L 
D: 
$data = json decode($response->getBody(), true); 
$hello = $data['data']| O]['id']; 
$hi = $data['data']['0"]['attributes"]['source"]['id']; 
$r = $conn->prepare("UPDATE orders SET paid_transaction= ? WHERE 
transaction_id= ?"); 
$r->execute([$hello, $hi]); 
session_start(); 
ifisset$ SESSION[user id'])) 
$user id = $ SESSION[user id']; 
Jelse( 
$user id ="; 
header('ocation:index.php?; 
Å 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF -8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="Viewport" content="width=device-width, initial-scale=1.0"> 
<title>Cjzave BBQ & GRILL Official Website</title> 
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper- 
bundle.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<Body> 
<!-- header section starts--> 
<?php include 'components/user_header.php'; ?> 
<!-- header section ends--> 
<div class="heading"> 
<h4>We are Preparing your Order. Please wait 30-45 mins. </h4> 
<h4> THANK YOU! </h4> 
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<p><a href="orders.php">See your Order Here</a></p> 
</div> 
</section> 
<!-- footer section starts --> 
<?php include 'components/footer.php'; ?> 
<!-- footer section ends --> 
</Body> 
</html> 


Webhook.php 
<?php 
header('Content-Type: application/json'); 
$request = file get contents('php://input'); 
$payload = json decode($request, true); 
$type = $payload['data [['attributes'][type"]; 
//\f event type is source.chargeable, call the createPayment API 
if ($type == 'source.chargeable') { 
$amount = $payload['data | 'attributes']['data | 'attributes' [amount]; 
$id = $payload['data']['attributes']['data']|'id']; 
$description = "GCash Payment Description"; 
$curl = curl init(); 
$fields = array("data" => array ("attributes" => array ("amount" => $amount, 
"source" => array ("id" => $id, "type" => "source"), "currency" => "PHP", 
"description" => $description))); 
$jsonFields = json_encode($fields); 
curl_setopt_array($curl, [ 
CURLOPT URL => "https://api.paymongo.com/v1/payments", 
CURLOPT_RETURNTRANSFER => true, 
CURLOPT_ENCODING =>"", 
CURLOPT_MAXREDIRS => 10, 
CURLOPT_TIMEOUT => 30, 
CURLOPT_HTTP_VERSION => CURL HTTP VERSION 1 1, 
CURLOPT CUSTOMREQUEST => "POST", 
CURLOPT POSTFIELDS => $jsonFields, 
CURLOPT HTTPHEADER => [ 
"Accept: application/json", 
//Input your encoded API keys below for authorization 
"Authorization: Basic 
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c2tfoGl2ZV9HVnRSbTQ1NFA1c2s2NmYyTGRjS2EyMk46" , // secret live 
// "Authorization: Basic 
c2tfdGVzdF9Qb1k1 VnNFR38djdU4zREdjanJTOWtCd2Q6" , // secret not live 
"Content-Type: application/json" 
L 
1); 
$response = curl_exec($curl); 
//Log the response 
$fp = file_put_contents( 'test.log', $response ); 
$err = curl_error($curl); 
curl_close($curl); 
if (Serr) { 
echo "cURL Error #:" . $err; 
//Log the response 
$fp = file put contents( test log, $err ); 
} else { 
echo $response; 
} 
} 


Admin/admin_account.php 

<?php 

include "../components/connect.php'; 

session_start(); 

$admin id = $_SESSION['admin_id"]; 

if('isset(Sadmin id))[ 
header(‘location:admin_login.php'); 


} 
ifisset($ GET['delete']) 
$delete id= $ GET[deleteT; 
$delete admin = $conn->prepare("DELETE FROM ‘admin’ WHERE id = ?"); 
$delete admin->execute([$delete id]); 
header('location:admin accounts.php'); 
d 
<!DOCTYPE html» 
<html lang="en"> 
<head> 
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<meta charset="UTF-8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Admins Accounts</title> 
<!-- font awesome cdn link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<!-- custom css file link --> 
<link rel="stylesheet" href="../css/admin style.css"> 
</head> 
<body> 
<?php include '../components/admin_header.php' ?> 
<!-- admins accounts section starts --> 
<section class="accounts"> 
<h1 class="heading">Admins Account</h1> 
<div class="box-container"> 
<div class="box"> 
<p>Register New Admin</p> 
<a href="register admin.php" class="option-btn">Register</a> 
</div> 


<?php 
$select account = $conn->prepare("SELECT * FROM admin"); 
$select account->execute(); 
if($select account->rowCount() > 0) 
while($fetch accounts = $select_account->fetch(PDO::FETCH_ASSOC)){ 
?» 
«div class="box"> 
«p» Admin Id : <span><?= $fetch accounts['id']; ?></span> </p> 
<p> Username ` <span><?= $fetch accounts['name']; ?></span> </p> 
«div class="flex-btn"> 
«a href="admin accounts.php?delete=<?= $fetch accounts['id']; ?»" 
class="delete-btn" onclick="return confirm('delete this account?');">Delete</a> 
«?php 
if($fetch accounts['id'] == $admin_id){ 
echo ‘<a href="update_profile.php" class="option-btn">update</a>"; 
> 
</div> 
</div> 
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<?php 
} 
Jelsef 
echo ‘<p class="empty">No Accounts Available</p>'; 
d 
</div> 
</section> 
<!-- admins accounts section ends --> 
<!-- custom js file link --> 
<script src="../js/admin_script.js"></script> 
</body> 
</html> 


Admin/admin_login.php 
<?php 
include "../components/connect.php'; 
session_start(); 
ifisset($ POST['submit']))( 
$name = $ POST[name7; 
$name = filter var($name, FILTER SANITIZE STRING); 
$pass = sha1($ POST['pass']); 
$pass - filter var($pass, FILTER SANITIZE STRING); 
$select admin = $conn-»prepare(" SELECT * FROM admin" WHERE name = 
? AND password = ?"); 
$select admin->execute([$name, $pass]); 
if($select admin->rowCount() > ON 
$fetch admin id= $select admin->fetch(PDO::FETCH ASSOO); 
$ SESSION['admin id" = $fetch admin id['id']; 
header(‘location:dashboard.php’); 
Jelsef 
$message[] = ‘Incorrect Username or Password!'; 


p» 
«IDOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset="UTF-8"> 
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«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>login</title> 
<!-- font awesome cdn link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<!-- custom css file link --> 
<link rel="stylesheet" href="../css/admin style.css"> 
</head> 
<body> 
<?php 
if(isset($message))( 
foreach($message as $message)( 
echo ' 
<div class="message"> 
<span>'.$message.'</span> 
<i class="fas fa-times" onclick="this.parentElement.remove();"></i> 
</div> 


1 
p 
<!-- admin login form section starts --> 
«section class="form-container"> 

«form action="" method="POST"> 

<h3>Login Now</h3> 

<p>Default Username = <span>Admin</span> & Password = 
<span>111</span></p> 

<input type="text" name="name" maxlength="20" required 
placeholder="enter your username" class="box" oninput="this.value = 
this.value.replace(/\s/g, ")"> 

<input type="password" name="pass" maxlength="20" required 
placeholder="enter your password" class="box" oninput="this.value = 
this.value.replace(/\s/g, ")"> 

<input type="submit" value="login now" name="submit" class="btn"> 

</form> 

</section> 
<!-- admin login form section ends --> 
</body> 
</html> 
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Admin/dashboard.php 
<?php 
include "../components/connect.php'; 
session start(); 
$admin id = $ SESSION['admin id']; 
if(lisset($admin id))[ 
header(‘location:admin_login.php'); 
d 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Dashboard</title> 
<!-- font awesome cdn link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<!-- custom css file link --> 
<link rel="stylesheet" href="../css/admin style.css"> 
</head> 
<body> 
<?php include '../components/admin_header.php' ?> 
<!-- admin dashboard section starts --> 
<section class="dashboard"> 
<h1 class="heading">Dashboard</h1> 
<div class="box-container"> 
<div class="box"> 
<h3>welcome!</h3> 
«p»«?- $fetch profile[name']; ?></p> 
<a href="update profile.php" class="btn">update profile</a> 
</div> 
<div class="box"> 
<?php 
$total pendings = 0; 
$select_pendings = $conn->prepare("SELECT * FROM ‘orders’ WHERE 
payment status = ?"); 
$select_pendings->execute(['preparing']); 
while($fetch_pendings = $select_pendings- 
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>fetch(PDO::FETCH_ASSOC)){ 
$total_pendings += $fetch_pendings['amount'’]; 
» 
<h3><span>Php</span><?= $total_pendings; ?><span>/-</span></h3> 
<p>Total Pendings</p> 
<a href="pending.php" class="btn">See Orders</a> 
</div> 
<div class="b0x"> 
<?php 
$total_pendings = 0; 
$select pendings = $conn->prepare("SELECT * FROM ‘orders’ WHERE 
payment_status = ?"); 
$select_pendings->execute(['Your order is out for delivery!']); 
while($fetch_pendings = $select_pendings- 
>fetch(PDO::FETCH_ASSOC)){ 
$total_pendings += $fetch_pendings['amount'’]; 
> 
<h3><span>Php</span><?= $total_pendings; ?><span>/-</span></h3> 
<p>Out for Delivery</p> 
<a href="out.php" class="btn">See Orders</a> 
</div> 
<div class="box"> 
<?php 
$total_completes = 0; 
$select completes = $conn->prepare("SELECT * FROM "orders WHERE 
payment_status = ?"); 
$select_completes->execute(['Delivered"]); 
while($fetch_completes = $select_completes- 
>fetch(PDO::FETCH_ASSOC)){ 
$total completes += $fetch_completes['amount']; 
» 
<h3><span>Php</span><?= $total_completes; ?><span>/-</span></h3> 
<p>Total Completes</p> 
<a href="placed_orders.php" class="btn">See Orders</a> 
</div> 
<div class="box"> 
<?php 
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$select orders = $conn->prepare("SELECT * FROM orders"); 
$select orders->execute(); 
$numbers of orders = $select orders->rowCount(); 

?> 

<h3><?= $numbers of orders; ?></h3> 

<p>Total Orders</p> 

<a href="placed_orders.php" class="btn">See Orders</a> 


</div> 
<div class="box"> 


<?php 
$select products = $conn->prepare("SELECT * FROM "products "); 
$select_products->execute(); 
$numbers_of_products = $select_products->rowCount();?> 
<h3><?= $numbers_of_products; ?></h3> 
<p>Products added</p> 
<a href="products.php" class="btn">See Products</a> 


</div> 
<div class="box"> 


<?php 
$select users = $conn->prepare("SELECT * FROM users"); 
$select_users->execute(); 
$numbers_of_users = $select_users->rowCount(); ?> 
<h3><?= $numbers_of_users; ?></h3> 
<p>Users Accounts</p> 
<a href="users_accounts.php" class="btn">See Users</a> 


</div> 
<div class="box"> 


<?php 
$select messages = $conn-»prepare("SELECT * FROM "messages "); 
$select messages-»execute(); 
$numbers of messages = $select_messages->rowCount();?> 
<h3><?= $numbers of messages; ?></h3> 
<p>New Messages</p> 
<a href="messages.php" class="btn">See Messages</a> 


</div> 


</div> 


</section> 

<!-- admin dashboard section ends --> 
<!-- custom js file link --> 

<script src="../js/admin_script.js"></script> 
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</body> 
</html> 


Admin/message.php 
<?php 
include "../components/connect.php'; 
session start(); 
$admin id = $ SESSION['admin id]; 
if(lisset($admin id)) 
header(location:admin login.php");) 
iflisset($ GET['delete']) 
$delete id= $ GET['delete]; 
$delete message = $conn->prepare("DELETE FROM "messages WHERE id 
= 2") 
$delete message->execute([$delete id]); 
header(‘location:messages.php');}?> 
<!DOCTYPE html» 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>messages</title> 
<!-- font awesome cdn link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<!-- custom css file link --> 
<link rel="stylesheet" href="../css/admin_style.css"> 
</head> 
<body> 
<?php include '../components/admin_header.php' ?> 
<!-- messages section starts --> 
<section class="messages"> 
<h1 class="heading">Messages</h1> 
<div class="box-container"> 
<?php 
$select messages = $conn->prepare("SELECT * FROM "messages "); 
$select messages->execute(); 
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if($select messages->rowCount() > 0){ 
while($fetch messages = $select messages- 
>fetch(PDO::FETCH_ASSOC)){?> 
<div class="box"> 
<p> Date : <span><?= $fetch messages['date']; ?></span> </p> 
<p> Name ` <span><?= $fetch messages['name'|; ?></span> </p> 
<p> Contact Number ` <span><?= $fetch messages['number']; ?></span> 
</p> 
<p> E-mail : <span><?= $fetch messages['email']; ?></span> </p> 
«p» Message ` <span><?= $fetch messages['message']; ?></span> </p> 
<a href="messages.php?delete=<?= $fetch messagesf['id']; ?»" 
class="delete-btn" onclick="return confirm('delete this message?’');">delete</a> 
</div> 
<?php 
) 


Jelsef 
echo ‘<p class="empty">You have no messages</p>'; }?> 

</div> 
</section> 
<!-- messages section ends --> 
<!-- custom js file link --> 
<script src="../js/admin_script.js"></script> 
</body> 
</html> 


Admin/out.php 

<?php 

include "../components/connect.php'; 

session_start(); 

$admin id = $ SESSION['admin id]; 

if(lisset($admin id) 
header(‘location:admin_login.php'); 


); 
if(isset($_POST['update_payment'])){ 
$order_id = $ POST['order id"]; 


$payment status = $ POST['payment_status']; 
$update status = $conn->prepare("UPDATE ‘orders SET payment status = 
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? WHERE id = ?"); 
$update status->execute([$payment status , Sorder_id]); 
$message[] = ‘payment status updated!'; 


} 
ifisset($ GET['delete']) 
$delete id= $ GET[deleteT; 
$delete order = $conn->prepare("DELETE FROM ‘orders’ WHERE id = ?"); 
$delete order->execute([$delete id]); 
header('ocation:pending.php"); 
d 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>placed orders</title> 
<!-- font awesome cdn link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<!-- custom css file link --> 
<link rel="stylesheet" href="../css/admin_style.css"> 
</head> 
<body> 
<?php include '../components/admin_header.php' ?> 
<!-- placed orders section starts --> 
<section class="placed-orders"> 
<h1 class="heading">Out for Delivery</h1> 
<div class="box-container"> 
<?php 
$select orders = $conn->prepare("SELECT * FROM ‘orders’ WHERE 
payment status = "Your order is out for delivery!"); 
$select_orders->execute(); 
if($select orders->rowCount() > 0){ 
while($fetch orders = $select_orders->fetch(PDO::FETCH_ASSOC)){ 
?> 
<div class="box"> 
<p> User Id : <span><?= $fetch orders['user id; ?></span> </p> 
<p> Transaction Id : <span><?= $fetch orders['paid transactionT; 
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?></span> </p> 
<p> Placed On : <span><?= $fetch_orders['placed_on']; ?></span> </p> 
<p> Name ` <span><?= $fetch_orders['name']; ?></span> </p> 
«p» E-mail : <span><?= $fetch orders['email]; ?></span> </p> 
<p> Contact Number ` <span><?= $fetch orders[number']; ?></span> </p> 
<p> Address : <span><?= $fetch orders['address']; ?></span> </p> 
<p> Total Products ` <span><?= $fetch orders['total products'|; ?></span> 
</p> 
<p> Total Price ` <span>Php<?= $fetch_orders['amount']; ?></span> </p> 
<p>Special Instruction ` <span><?= $fetch_orders[message']; ?>/- 
</span></p> 
«p» Payment Method ` <span><?= $fetch orders['method']; ?></span> </p> 
<form action="" method="POST"> 
<input type="hidden" name="order id" value="<?= $fetch orders['id']; ?>"> 
<select name="payment status" class="drop-down"> 
<option value="" selected disabled><?= $fetch_orders['payment_status']; 
?></option> 
<option value="Delivered">Delivered</option> 
</select> 
<div class="flex-btn"> 
<input type="submit" value="update" class="btn" 
name="update_payment"> 
<a href="placed_orders.php?delete=<?= $fetch orders['id']; ?>" 
class="delete-btn" onclick="return confirm('delete this order?');">delete</a> 
</div> 
</form> 
</div> 
<?php 
} 
jelse( 
echo '«p class="empty">no orders placed yet!</p>';} ?> 
</div> 
</section> 
<!-- placed orders section ends --> 
<!-- custom js file link --> 
<script src="../js/admin_script.js"></script> 
</body> 
</html> 
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Admin/pending.php 

<?php 

include "../components/connect.php'; 

session start(); 

$admin id = $ SESSION['admin id]; 

if(lisset($admin id))[ 
header(‘location:admin_login.php'); 


y 
if(isset($_POST['update_payment'])){ 

$order_id = $ POST['order id]; 

$payment status = $ POST['payment_status']; 

$update status = $conn->prepare("UPDATE ‘orders SET payment status = 
? WHERE id = ?"); 

$update status->execute([$payment status , $order id]); 

$message[] = ‘payment status updated!'; 


) 
ifisset($ GET['delete']) 
$delete id= $ GET[deleteT; 
$delete order = $conn->prepare("DELETE FROM ‘orders’ WHERE id = ?"); 
$delete_order->execute([$delete_id]); 
header('ocation:pending.php"); 
d 
<!DOCTYPE html» 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>placed orders</title> 
<!-- font awesome cdn link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<!-- custom css file link --> 
<link rel="stylesheet" href="../css/admin_style.css"> 
</head> 
<body> 
<?php include '../components/admin_header.php' ?> 
<!-- placed orders section starts --> 
<section class="placed-orders"> 
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<h1 class="heading">pending orders</h1> 
<div class="box-container"> 
<?php 
$select orders = $conn->prepare("SELECT * FROM orders" WHERE 
payment status = 'Preparing"); 
$select_orders->execute(); 
if($select orders->rowCount() > 0){ 
while($fetch orders = $select_orders->fetch(PDO::FETCH_ASSOC)){ 
?» 
«div class="box"> 
<p> User Id : <span><?= $fetch orders[user id; ?></span> </p> 
«p» Transaction Id : <span><?= $fetch orders['paid transactionT; 
?></span> </p> 
<p> Placed On : <span><?= $fetch_orders['placed_on']; ?></span> </p> 
<p> Name ` <span><?= $fetch_orders['name']; ?></span> </p> 
«p» E-mail : <span><?= $fetch_orders['email']; ?></span> </p> 
<p> Contact Number ` <span><?= $fetch orders[number']; ?></span> </p> 
<p> Address : <span><?= $fetch orders['address']; ?></span> </p> 
<p> Total Products ` <span><?= $fetch orders['total products'|; ?></span> 
</p> 
<p> Total Price ` <span>Php<?= $fetch orders['amount']; ?></span> </p> 
«p»Special Instruction ` <span><?= $fetch_orders['message']; ?>/- 
</span></p> 
<p> Payment Method ` <span><?= $fetch_orders['method']; ?></span> </p> 
<form action="" method="POST"> 
<input type="hidden" name="order id" value="<?= $fetch orders['id']; ?>"> 
<select name="payment_status" class="drop-down"> 
<option value="" selected disabled><?= $fetch_orders['payment_status']; 
?></option> 
<option value="Your order is out for delivery!">Your order is out for 
delivery |</option> 
</select> 
<div class="flex-btn"> 
<input type="submit" value="update" class="btn" 
name="update payment"> 
<a href="placed orders.php?delete=<?= $fetch orders['id']; ?»" 
class="delete-btn" onclick="return confirm('delete this order?');">delete</a> 
</div> 
</form> 
</div> 


156 


<?php 
} 
Jelsef 
echo '<p class="empty">no orders placed yet!</p>'; 
) ?> 
</div> 
</section> 
<!-- placed orders section ends --> 
<!-- custom js file link --> 
<script src="../js/admin_script.js"></script> 
</body> 
</html> 


Admin/place_orders.php 

<?php 

include '../components/connect.php'; 

session_start(); 

$admin id = $ SESSION['admin id'; 

if(!isset($admin_id)){ 
header(‘location:admin_login.php'); 


y 
if(isset($_POST['update_payment'])){ 

$order_id = $ POSTI['order_id"]; 

$payment_status = $ POST[payment status'; 

$update status = $conn->prepare("UPDATE ‘orders’ SET payment status = 
? WHERE id = ?"); 

$update status->execute([$payment status , $order id]); 

$message[] = 'payment status updated!'; 


} 
ifisset($ GET['delete']) 
$delete id= $ GET['delete]; 
$delete order = $conn->prepare("DELETE FROM ‘orders’ WHERE id = ?"); 
$delete order->execute([$delete id]); 
header(‘location:placed_orders.php’); 
p» 
«IDOCTYPE html» 
«html lang="en"> 
«head» 
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<meta charset="UTF-8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>placed orders</title> 
<!-- font awesome cdn link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<!-- custom css file link --> 
<link rel="stylesheet" href="../css/admin_style.css"> 
</head> 
<body> 
<?php include '../components/admin_header.php' ?> 
<!-- placed orders section starts --> 
<section class="placed-orders"> 
<h1 class="heading">completed orders</h1> 
<div class="box-container"> 
<?php 
$select orders = $conn->prepare("SELECT * FROM ‘orders’ WHERE 
payment status = 'Delivered' "); 
$select_orders->execute(); 
if($select orders->rowCount() > 0){ 
while($fetch orders = $select_orders->fetch(PDO::FETCH_ASSOC)){ 
?> 
<div class="box"> 
<p> User Id : <span><?= $fetch orders[user id]; ?></span> </p> 
<p> Transaction Id : <span><?= $fetch orders['paid transaction']; 
?></span> </p> 
<p> Placed On ` <span><?= $fetch orders['placed on"; ?></span> </p> 
<p> Name ` <span><?= $fetch orders['name"]; ?></span> </p> 
<p> E-mail : <span><?= $fetch_orders['email']; ?></span> </p> 
<p> Contact Number ` <span><?= $fetch orders[number']; ?></span> </p> 
<p> Address : <span><?= $fetch orders['address']; ?></span> </p> 
<p> Total Products ` <span><?= $fetch orders['total products'|; ?></span> 
</p> 
<p> Total Price ` <span>Php<?= $fetch_orders['amount']; ?></span> </p> 
<p>Special Instruction ` <span><?= $fetch orders['message"]; ?>/- 
</span></p> 
<p> Payment Method ` <span><?= $fetch orders['method']; ?></span> </p> 
<form action="" method="POST"> 
<input type="hidden" name="order id" value="<?= $fetch orders[id']; ?>"> 
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<select name="payment status" class="drop-down"> 
<option value="" selected disabled><?= $fetch orders['payment status']; 
?></option> 
</select> 
<div class="flex-btn"> 
<a href="placed_orders.php?delete=<?= $fetch orders['id']; ?»" 
class-"delete-btn" onclick="return confirm('delete this order?');">delete</a> 
</div> 
</form> 
</div> 
<?php 
} 
jelse( 
echo '<p class="empty">no orders placed yet!</p>'; 
}?> 
</div> 
</section> 
<!-- placed orders section ends --> 
<!-- custom js file link --> 
<script src="../js/admin_script.js"></script> 
</body> 
</html> 


Admin/products.php 
<?php 
include '../components/connect.php'"; 
session start(); 
$admin id = $ SESSION['admin id]; 
if(lisset($admin id))( 
header(‘location:admin_login.php'); Y; 
iflisset($ POST['add product']))( 
$name = $ POST[name7; 
$name = filter var($name, FILTER SANITIZE STRING); 
$parts = $ POST[parts?; 
$parts - filter var($parts, FILTER SANITIZE STRING); 
$price = $ POST[priceT; 
$price = filter var($price, FILTER SANITIZE STRING); 
$category = $ POST[categoryT; 
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$category = filter var($category, FILTER SANITIZE STRING); 
$image = $ FILES['image'][nameT; 

$image = filter var($image, FILTER SANITIZE STRING); 
$image size = $ FILES['image"]['sizeT; 

$image tmp name = $ FILES['image']Ó tmp name"; 

$image folder = '../uploaded img/.$image; 


$select products = $conn-»prepare(" SELECT * FROM "products WHERE 
name - ?"); 
$select products->execute([$name]); 
if($select products-»rowCount() > OM 
$message[] = 'product name already exists!'; 
Jelse( 
if($image size > 12000000){ 
$message[] = 'image size is too large’; 
Jelse( 
move uploaded file($image tmp name, $image folder); 
$insert product = $conn->prepare("INSERT INTO "products (name, 


$insert product-»execute([$name, $category, $price, $parts, $image]); 
$message[] = 'new product added!'; 
} 
} 


} 
ifisset($ GET['delete']) 
$delete id= $ GET[deleteT; 
$delete product image = $conn->prepare("SELECT * FROM products" 
WHERE id = ?"); 
$delete product image->execute([$delete id]); 
$fetch delete image = $delete product image- 
>fetch(PDO::FETCH_ASSOC); 
unlink('../uploaded_img/'.$fetch_delete_image['image’]); 
$delete_product = $conn->prepare("DELETE FROM "products WHERE id = 
2): 
$delete product->execute([$delete id]); 
$delete cart = $conn->prepare("DELETE FROM "cart WHERE pid = ?"); 
$delete cart->execute([$delete id]); 
header(‘location:products.php'); 
p 


«IDOCTYPE html» 
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<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>products</title> 
<!-- font awesome cdn link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<!-- custom css file link --> 
<link rel="stylesheet" href="../css/admin style.css"> 
</head><body> 
<?php include '../components/admin header.php' ?> 
<!-- add products section starts --> 
<section class="add-products"> 
<form action="" method="POST" enctype="multipart/form-data"> 
<h3>Add Product</h3> 
<input type="text" required placeholder="enter product name" name="name 
maxlength="100" class="box"> 
<input type="text" required placeholder="enter product part" name="parts" 
maxlength="100" class="box"> 
<input type="number" min="0" max="9999999999" required 
placeholder="enter product price" name="price" onkeypress="if(this.value.length 
== 10) return false;" class="box"> 
<select name="category" class="box" required> 
<option value="" disabled selected>select category --</option> 
<option value="Available">Available</option> 
<option value="Not Available">Not Available</option> 
</select> 
<input type="file" name="image" class="box" accept-"image/jpg, 
image/jpeg, image/png, image/webp" required> 
<input type="submit" value="add product" name="add product" class="btn"> 
</form> 
</section> 
<!-- add products section ends --> 
<!-- Show products section starts --> 
<section class="show-products" style="padding-top: 0;"> 
<div class="box-container"> 
<?php 
$show products = $conn->prepare("SELECT * FROM products "); 
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$show products->execute(); 
if($show products->rowCount() > 0){ 
while($fetch products = $show products->fetch(PDO::FETCH ASSOC))f 
?> 
<div class="box"> 
<img src="../uploaded_img/<?= $fetch_products['image']; ?>" alt=""> 
<div class="flex"> 
«div class="price"><span>Php</span><?= $fetch products['priceT; 
?><span>.00</span></div> 
<div class="category"><?= $fetch products['category']; ?></div> 
</div> 
<div class="name"><?= $fetch products['name']; ?></div> 
<div class="name"><?= $fetch products[parts']; ?></div> 
<div class="flex-btn"> 
<a href="update product.php?update-«?- $fetch products['id']; ?>" 
class="option-btn">Update</a> 
<a href="products.php?delete=<?= $fetch products['id']; ?»" 
class="delete-btn" onclick="return confirm('delete this product?");">Delete</a> 
</div> 
</div> 
<?php ) 
Jelsef 
echo ‘<p class="empty">no products added yet!</p>';}?> </div> 
</section> 
<!-- show products section ends --> 
<!-- custom js file link --> 
<script src="../js/admin_script.js"></script> 
</body> 
</html> 


Admin/ register_admin.php 

<?php 

include '../components/connect.php'; 

session_start(); 

$admin_id = $ SESSION['admin id]; 

if(!isset($admin_id)){ 
header('location:admin login.php"); }; 

ifisset$ POST['submit']))( 
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$name = $ POST['name"];; 
$name = filter var($name, FILTER SANITIZE STRING); 
$pass = sha1($ POST['pass']); 
$pass = filter var($pass, FILTER SANITIZE STRING); 
$cpass = sha1($ POST['cpass']); 
$cpass = filter var($cpass, FILTER SANITIZE STRING); 
$select admin = $conn->prepare("SELECT * FROM admin" WHERE name = 
2"); 
$select admin->execute([$name]); 
if($select admin->rowCount() > ON 
$message[] = 'username already exists!'; 
jelse( 
if($pass |= $cpass){ 
$message[] = 'Confirm passowrd not matched!'; 
Jelsef 
$insert admin = $conn->prepare("INSERT INTO admin (name, 
password) VALUES(?,?)"); 
$insert admin->execute([$name, $cpass]); 
$message[] = 'New admin registered; 
} }2> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>register</title> 
<!-- font awesome cdn link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<!-- custom css file link --> 
<link rel="stylesheet" href="../css/admin_style.css"> 
</head> 
<body> 
<?php include '../components/admin_header.php' ?> 
<!-- register admin section starts --> 
<section class="form-container"> 
<form action="" method="POST"> 
<h3>register new</h3> 
<input type="text" name="name" maxlength="20" required 
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placeholder="Enter your Username" class="box" oninput="this.value = 
this.value.replace(/\s/g, ")"> 

<input type="password" name="pass" maxlength="20" required 
placeholder="Enter your Password" class="box" oninput="this.value = 
this.value.replace(/\s/g, ")"> 

<input type="password" name="cpass" maxlength="20" required 
placeholder="Confirm your Password" class="box" oninput="this.value = 
this.value.replace(/\s/g, ")"> 

<input type="submit" value="register now" name="submit" class="btn"> 

</form> 

</section> 
<!-- register admin section ends --> 
<!-- custom js file link --> 
<script src="../js/admin_script.js"></script> 
</body> 
</html> 


Admin/update_product.php 

<?php 

include '../components/connect.php'; 

session_start(); 

$admin id = $ SESSION['admin id]; 

if(lisset($admin du! 
header(‘location:admin_login.php'); 


h 
if(isset($ POST['update']))( 
$pid = $ POST['pid']; 
$pid = filter var($pid, FILTER SANITIZE STRING); 
$name = $ POST[name7; 
$name = filter var($name, FILTER SANITIZE STRING); 
$parts = $ POST[parts?; 
$name = filter var($name, FILTER SANITIZE STRING); 
$price = $ POST[priceT; 
$price - filter var($price, FILTER SANITIZE STRING); 
$category = $ POST[categoryT; 
$category - filter var($category, FILTER SANITIZE STRING); 
$update product = $conn->prepare("UPDATE ‘products’ SET name ?, 
category = ?, price = ?, parts = ? WHERE id = ?"); 
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$update product->execute([$name, $category, $price,$parts, $pid]); 
$message[] = ‘product updated!'; 
$old image = $ POST[old image"; 
$image = $ FILES['image']nameT; 
$image = filter var($image, FILTER SANITIZE STRING); 
$image size = $ FILES['image']['size’]; 
$image tmp name = $ FILES['image"['tmp name"; 
$image folder = '../uploaded_img/'.Simage; 
if(lempty($image))( 
if($image size > 12000000) 
$message[] = ‘images size is too large!"; 


Jelsef 
$update image = $conn->prepare("UPDATE ‘products’ SET image = ? 
WHERE id = ?"); 


$update_image->execute([$image, $pid]); 
move uploaded file($image tmp name, $image_folder); 
unlink('../uploaded img/.$old image); 
$message[] = 'image updated!'; 
) jg 
«IDOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset="UTF-8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>update product</title> 
<!-- font awesome cdn link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<!-- custom css file link --> 
<link rel="stylesheet" href="../css/admin_style.css"> 
</head> 
<body> 
<?php include '../components/admin_header.php' ?> 
<!-- update product section starts --> 
<section class="update-product"> 
<h1 class="heading">update product</h1> 
<?php 
$update_id =$ GET['update"]; 
$show products = $conn->prepare("SELECT * FROM "products WHERE id 
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SSC 
$show products->execute([$update id]); 
if$show products->rowCount() > 0){ 
while($fetch products = $show products->fetch(PDO::FETCH ASSOO))( 
?» 
«form action="" method="POST" enctype="multipart/form-data"> 
<input type="hidden" name="pid" value="<?= $fetch products['id']; ?>"> 
<input type="hidden" name="old image" value="<?= 
$fetch_products['image']; ?>"> 
<img src="../uploaded_img/<?= $fetch products['image']; ?>" alt=""> 
<span>Update Name</span> 
<input type="text" required placeholder="enter product name" name="name" 
maxlength="100" class="box" value="<?= $fetch_products['name']; ?>"> 
<span>Update Part</span> 
<input type="text" required placeholder="enter product part" name="parts" 
maxlength="100" class="box" value="<?= $fetch products[parts']; ?>"> 
<span>Update Price</span> 
<input type="number" min="0" max="9999999999" required 
placeholder="enter product price" name="price" onkeypress="if(this.value.length 
== 10) return false;" class="box" value="<?= $fetch_products|'price']; ?>.00"> 
<span>Update Category</span> 
<select name="category" class="box" required> 
<option selected value="<?= $fetch products['category']; ?>"><?= 
$fetch_products['category']; ?></option> 
<option value="Available">Available</option> 
<option value="Not Available">Not Available</option> 
</select> 
<span>Update Image</span> 
<input type="file" name="image" class="box" accept-"image/jpg, 
image/jpeg, image/png, image/webp"> 
<div class="flex-btn"> 
<input type="submit" value="update" class="btn" name="update"> 
<a href="products.php" class="option-btn">Go Back</a> 
</div> 
</form> 
<?php 
} 


Jelsef 
echo '<p class="empty">no products added yet!</p>'; 
) ?> 
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</section> 

<!-- update product section ends --> 

<!-- custom js file link --> 

<script src="../js/admin_script.js"></script> 
</body> 

</html> 


Admin/update profile.php 
<?php 
include '../components/connect.php'; 
session start(); 
$admin id = $ SESSION['admin id"; 
if(lisset($admin id))( 
header('location:admin_login.php'); } 
ifisset($ POST['submit']))( 
$name = $ POST[name7; 
$name = filter var($name, FILTER SANITIZE STRING); 
if(lempty($name))( 
$select name = $conn->prepare("SELECT * FROM admin WHERE name 
="); 
$select name->execute([$name]); 
if($select name->rowCount() > 0) 
$message[] = 'username already taken!'; 
Jelse( 
$update name = $conn->prepare("UPDATE admin SET name = ? 
WHERE id = ?"); 
$update name->execute([$name, $admin id]); 
}} 
$empty pass = 'da39a3ee5e6b4b0d3255bfef95601890afd80709'; 
$select old pass = $conn->prepare("SELECT password FROM ‘admin 
WHERE id = ?"); 
$select old pass->execute([$admin id]); 
$fetch prev pass = $select old pass->fetch(PDO::FETCH ASSOO); 
$prev pass = $fetch prev pass[|password; 
$old pass = sha1($ POST[old pass"); 
$old pass = filter var($old pass, FILTER SANITIZE STRING); 
$new pass = sha1($ POST['new pass"); 
$new pass = filter var($new pass, FILTER SANITIZE STRING); 
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$confirm pass = sha1($ POST['confirm pass"); 
$confirm pass = filter var($confirm pass, FILTER SANITIZE STRING); 
if($old pass != $empty pass) 
if($old pass !- $prev_pass){ 
$message[] = 'Old Password not Matched!'; 
Jelseif($new pass != $confirm pass) 
$message[] = 'Confirm Password not Matched!'; 
Jelse( 
if$new pass !- $empty_pass){ 
$update pass = $conn->prepare("UPDATE admin SET password = ? 
WHERE id = ?"); 
$update_pass->execute([$confirm_pass, $admin id]); 
$message[] = 'Password Updated Successfully!'; 
Jelse( 
$message[] = 'Please Enter a New Password"; 
) ?> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>profile update</title> 
<!-- font awesome cdn link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<!-- custom css file link --> 
<link rel="stylesheet" href="../css/admin style.css"> 
</head> 
<body> 
<?php include '../components/admin_header.php' ?> 
<!-- admin profile update section starts --> 
<section class="form-container"> 
<form action="" method="POST"> 
<h3>Update Profile</h3> 
<input type="text" name="name" maxlength="20" class="box" 
oninput="this.value = this.value.replace(As/g, ")" placeholder="<?= 
$fetch profile[name']; ?>"> 
<input type="password" name="old pass" maxlength="20" 
placeholder="enter your old password" class="box" oninput="this.value = 


168 


this.value.replace(/\s/g, ")"> 

<input type="password" name="new pass" maxlength="20" 
placeholder="enter your new password" class="box" oninput="this.value = 
this.value.replace(/\s/g, ")"> 

<input type="password" name="confirm pass" maxlength="20" 
placeholder="confirm your new password" class="box" oninput="this.value = 
this.value.replace(/\s/g, ")"> 

<input type="submit" value="update now" name="submit" class="btn"> 

</form> 

</section> 
<!-- admin profile update section ends --> 
<!-- custom js file link --> 
<script src="../js/admin_script.js"></script> 
</body> 
</html> 


Admin/users_accounts.php 

<?php 

include '../components/connect.php'; 

session_start(); 

$admin id = $ SESSION['admin id]; 

if(!isset($admin_id)){ 
header(‘location:admin_login.php'); 


} 
if(isset($_POST['submit'])){ 
$name = $ POST[name7; 
$name = filter var($name, FILTER_SANITIZE_STRING); 
if(lempty($name))( 
$select name = $conn->prepare("SELECT * FROM admin WHERE name 
=") 
$select name->execute([$name]); 
if($select name->rowCount() > 0) 
$message[] = 'username already taken!'; 


Jelsef 
$update name = $conn->prepare("UPDATE admin SET name = ? 
WHERE id = ?"); 


$update name->execute([$name, $admin id]); 


) 
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} 
$empty pass = 'da39a3ee5e6b4b0d3255bfef9560 1 890afd80709'; 
$select old pass = $conn->prepare("SELECT password FROM ‘admin 
WHERE id = ?"); 
$select old pass->execute([$admin id]); 
$fetch prev pass = $select old pass->fetch(PDO::FETCH ASSOO); 
$prev pass = $fetch prev pass[|passwordT; 
$old pass = sha1($ POST[old pass"); 
$old pass - filter var($old pass, FILTER SANITIZE STRING); 
$new pass = sha1($ POST[new pass"); 
$new pass - filter var($new pass, FILTER SANITIZE STRING); 
$confirm pass = sha1($ POST[confirm pass"); 
$confirm pass - filter var($confirm pass, FILTER SANITIZE STRING); 
if($old pass != $empty pass) 
if($old pass !- $prev pass)( 
$message[] = 'Old Password not Matched!'; 
Jelseif($new pass != $confirm_pass){ 
$message[] = 'Confirm Password not Matched!'; 
Jelse( 
if$new pass !- $empty_pass){ 
$update pass = $conn->prepare("UPDATE admin SET password = ? 
WHERE id = ?"); 
$update_pass->execute([$confirm_pass, $admin id]); 
$message[] = 'Password Updated Successfully!'; 
Jelse( 
$message[] = 'Please Enter a New Password"; 
1)))?> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
«meta http-equiv="X-UA-Compatible" content="lE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>profile update</title> 
<!-- font awesome cdn link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.1/css/all.min.css"> 
<!-- custom css file link --> 
<link rel="stylesheet" href="../css/admin style.css"> 
</head> 
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<body> 
<?php include '../components/admin_header.php' ?> 
<!-- admin profile update section starts --> 
<section class="form-container"> 
<form action="" method="POST"> 

<h3>Update Profile</h3> 

<input type="text" name="name" maxlength="20" class="box" 
Oninput="this.value = this.value.replace(/\s/g, ")" placeholder="<?= 
$fetch profile[name']; ?>"> 

<input type="password" name="old pass" maxlength="20" 
placeholder="enter your old password" class="box" oninput="this.value = 
this.value.replace(/s/g, ")"> 

<input type="password" name="new pass" maxlength="20" 
placeholder="enter your new password" class="box" oninput="this.value = 
this.value.replace(/\s/g, ")"> 

<input type="password" name="confirm pass" maxlength="20" 
placeholder="confirm your new password" class="box" oninput="this.value = 
this.value.replace(/s/g, ")"> 

<input type="submit" value="update now" name="submit" class="btn"> 

</form> 

</section> 
<!-- admin profile update section ends --> 


<!-- custom js file link --> 

<script src="../js/admin_script.js"></script> 
</body> 

</html> 


Components/add_cart.php 
<?php 
if(isset($_POST['add_to_cart'])){ 
if($user id == "){ 
header(‘location:login.php’); 
Jelsef 
$pid = $ POST[pid!; 
$pid = filter var($pid, FILTER SANITIZE STRING); 
$name = $ POST['name"];; 
$name = filter var($name, FILTER SANITIZE STRING); 
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$price = $ POST['price'); 
$price = filter var($price, FILTER SANITIZE STRING); 
$image = $ POST['imageT; 
$image = filter var($image, FILTER SANITIZE STRING); 
$qty = $ POST['aty]; 
$qty = filter var($qty, FILTER SANITIZE STRING); 
$check cart numbers = $conn->prepare("SELECT * FROM ‘cart WHERE 
name = ? AND user id = ?"); 
$check cart numbers->execute([$name, $user id]); 
if($check cart numbers->rowCount() > 0){ 
$message[] = ‘already added to cart!'; 
Jelsef 
$insert cart = $conn->prepare("INSERT INTO "cart (user id, pid, name, 
price, quantity, image) VALUES(?,?,?,?,?,?)"); 
$insert cart->execute([$user id, $pid, $name, $price, $qty, $image]); 
$message[] = added to cart!'; 


}}} ?> 


Components/admin header.php 
<?php 
if(isset($message))( 
foreach($message as $message){ 
echo ' 
«div class="message"> 
<span>'.$message.'</span> 
<i class="fas fa-times" onclick="this.parentElement.remove();"></i> 
</div> 
34475 
«header class="header"> 
«section class="flex"> 
«a href="dashboard.php" class="logo"><i class="fas fa-fire"></i> 
Admin<span>Panel</span></a> 
<nav class="navbar"> 
<a href="dashboard.php">Home</a> 
<a href="products.php">Products</a> 
<a href="pending.php">Pending</a> 
<a href="out.php">Out</a> 
<a href="placed_orders.php">Complete</a> 
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<a href="users_accounts.php">Users</a> 
<a href="messages.php">Messages</a> 
</nav> 
<div class="icons"> 
<div id="menu-btn" class="fas fa-bars"></div> 
<div id="user-btn" class="fas fa-user"></div> 
</div> 
<div class="profile"> 
<?php 
$select profile = $conn->prepare("SELECT * FROM admin" WHERE id 
= 2"); 
$select profile->execute([$admin id]); 
$fetch profile = $select profile->fetch(PDO::FETCH ASSOC); 
?» 
«p»«?- $fetch profilel'name']; ?></p> 
«a href="update_profile.php" class="btn">Update Profile</a> 
«a href="../components/admin_logout.php" onclick="return confirm('logout 
from this website?');" class="delete-btn">logout</a> 
</div> 
</section> 
</header> 


Components/ admin logout.php 
<?php 

include 'connect.php'; 

session start(); 

session_unset(); 

session_destroy(); 
header(‘location:../admin/admin_login.php'); 
?> 


Components/connect.php 

<?php 

$db name = 'mysql:host=localhost;dbname=u399856170 cjzave'; 
$user name = 'u399856170 cjzave'; 

$user password = 'Cjzave1234'; 

$conn = new PDO($db name, $user name, $user password); 
?» 
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Components/footer.php 
<!-- footer section starts --> 
<footer class="footer "> 
<section class="grid "> 
<div class="box "> 
<img src="PICTURES/email-icon.png " alt=" "> 
<h3>Social Media</h3> 
<a href="mailto:Ihanalano@gmail.com ">Email: |hanalano@gmail.com</a> 
<a href="https://www.facebook.com/cjzavebbqandgrill">Facebook: Cjzave 
BBQ & GRILL</a> </div> 
<div class="box "> 
<img src="PICTURES/clock-icon.png " alt=" "> 
<h3>Opening Hours</h3> 
<p>9:00 am until 9:00 pm 
<p>Cut-off time of accepting orders</p> </p> </div> 
<div class="box "> 
<img src="PICTURES/map-icon.png " alt=" "> 
<h3>Address</h3> 
<a href="# "> # Zone 15 Magsaysay Avenue</a> 
<p>Naga City, Philippines</p></div> 
<div class="box "> 
<img src="PICTURES/phone-icon.png " alt=" "> 
<h3>Contact Number</h3> 
<a href="tel:09054732513">09054732513</a> 
<p>Globe Telecom</p> </div> 
</section> 
<div class="credit ">&copy; Copyright @ by <span>AMA BSIT Students</span> 
| All Rights Reserved</div> 
</footer> 
<!-- footer section ends --> 


Components/user_header.php 
<?php 
if(isset($message))( 
foreach($message as $message){ 
echo ' 
«div class="message"> 
<span>'.$message.'</span> 
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<i class="fas fa-times" onclick="this.parentElement.remove();"></i> 
</div> 
max 
«body» 
«header» 
«section class="flex"> 
«a href="index.php" class="logo"><i class="fas fa-fire"></i> Cjzave BBQ 
& GRILL</a> 
<nav class="navbar"> 
<a href="index.php">Home</a> 
<a href="about.php">About Us</a> 
<a href="menu.php">Menu</a> 
<a href="orders.php">Order</a> 
<a href="contact.php">Contact</a> 
</nav> 
<div class="icons"> 
<?php 
$count_cart_items = $conn->prepare("SELECT * FROM ‘cart WHERE 
user_id = ?"); 
$count cart items->execute([$user id]); 
$total cart items = $count cart items->rowCount(); ?> 
<a href="search.php"><i class="fas fa-search"></i></a> 
<a href="cart.php"><i class="fas fa-shopping-cart"></i><span>(<?= 
$total cart items; ?>)</span></a> 
<div id="user-btn" class="fas fa-user"></div> 
<div id="menu-btn" class="fas fa-bars"></div> 
</div> 
<div class="profile"> 
<?php 
$select profile = $conn->prepare("SELECT * FROM ‘users 
WHERE id = ?"); 
$select profile->execute([$user id]); 
if($select profile->rowCount() > ON 
$fetch profile = $select profile->fetch(PDO::FETCH ASSOC); 
?» 
«p class="name"><?= $fetch profilel'name']; ?></p> 
«div class="flex"> 
«a href="profile.php" class="btn">Profile</a> 
«a href="components/user_logout.php" onclick="return 
confirm('logout from this website?');" class="delete-btn">Logout</a> 
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</div> 
<?php 
Jelsef 
?> 
<p class="name">WELCOME!</p> 
«a href="login.php" class="btn">login</a> 
<a href="register.php" class="btn">Register</a> 
<?php 
} 
?> 
</div> 
</section> 
</header> 
<script src="js/script.js "></script> 
</body> 


Components/user logout.php 
<?php 

include 'connect.php'; 

session start(); 

session_unset(); 

session destroy(); 
header(‘location:../index.php'); 

?> 


Css/admin style.css 
@import 
url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@ 100;200;300;40 
0&display=swap"); 
root { 

--main-color: darkred; 

--red: #FF7F50; 

--orange: #ff0000; 

--black: #000000; 

--white: #fff; 

--light-bg: #f5f5f5; 
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--light-color: #999; 
--border: .2rem solid var(--black); 


font-family: 'Montserrat', sans-serif; 
margin: 0; 

padding: 0; 

box-sizing: border-box; 
text-decoration: none; 

outline: none; 

border: none; 


--box-shadow: 0 .5rem 1rem rgba(0, 0, O, . 


*::selection ( 
color: var(--white); 
background-color: var(--main-color); 
} 
::-webkit-scrollbar I 
width: 1rem; 
height: .5rem; 


::-webkit-scrollbar-track ( 
background-color: none; 


::-webkit-scrollbar-thumb { 
background-color: var(--main-color); 


} 
html { 
font-size: 62.5%; 
overflow-x: hidden; 
} 
body { 
background-color: var(--light-bg); 
/* padding-bottom: 7rem; */ 


section { 
max-width: 1200px; 
margin: 0 auto; 
padding: 2rem; 
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.btn, 
.delete-btn, 
.option-btn { 


) 


display: block; 
margin-top: 1rem; 
border-radius: .5rem; 
cursor: pointer; 

width: 100%; 

font-size: 1.8rem; 

color: var(--white); 
padding: 1.2rem 3rem; 
text-transform: capitalize; 
text-align: center; 


} 
btn { 


background-color: var(--main-color); 


delete-btn { 
background-color: var(--red); 


option-btn { 
background-color: var(--orange); 


btn:hover, 

delete-btn:hover, 

option-btn:hover { 
background-color: var(--black); 


} 
flex-btn { 


display: flex; 
gap: 1rem; 


} 


message { 
position: sticky; 
top: 0; 
max-width: 1200px; 
margin: 0 auto; 
background-color: var(--light-bg); 
padding: 2rem; 
display: flex; 
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align-items: center; 
gap: 1rem; 
justify-content: space-between; 


.message span I 


} 


font-size: 2rem; 
color: var(--black); 


.message i { 


} 


font-size: 2.5rem; 
color: var(--red); 
cursor: pointer; 


.message i:hover { 


color: var(--black); 


} 
.heading { 


} 


text-align: center; 
margin-bottom: 2rem; 
text-transform: capitalize; 
color: var(--black); 
font-size: 3rem; 


.empty { 


border: var(--border); 
border-radius: .5rem; 
background-color: var(--white); 
padding: 1.5rem; 

text-align: center; 

width: 100%; 

font-size: 2rem; 

text-transform: capitalize; 

color: var(--red); 

box-shadow: var(--box-shadow); 


.form-container { 


display: flex; 
align-items: center; 
justify-content: center; 
min-height: 100vh; 
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} 


.form-container form { 


} 


background-color: var(--white); 
border-radius: .5rem; 

border: var(--border); 
box-shadow: var(--box-shadow); 
padding: 2rem; 

text-align: center; 

width: 50rem; 


.form-container form h3 { 


} 


font-size: 2.5rem; 

color: var(--black); 
text-transform: capitalize; 
margin-bottom: 1rem; 


.form-container form p { 


} 


margin: 1rem 0; 
font-size: 2rem; 
color: var(--light-color); 


.form-container form p span { 


} 


color: var(--main-color); 


.form-container form .box { 


width: 100%; 

background-color: var(--light-bg); 
padding: 1.4rem; 

font-size: 1.4rem; 

color: var(--black); 

margin: 1rem 0; 

border: var(--border); 

font-size: 1.8rem; 

border-radius: .5rem; 


-header { 


position: sticky; 
top: 0; 

left: 0; 

right: 0; 
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background-color: black; 
box-shadow: var(--box-shadow); 
z-index: 1000; 

border-bottom: var(--border); 


.header .flex I 
display: flex; 
align-items: center; 
justify-content: space-between; 
position: relative; 


.header .flex .logo ( 
font-size: 2.5rem; 
color: var(--white); 


.header .flex .logo span ( 
color: var(--main-color); 


.header .flex .logo i { 
color: var(--main-color); 


.header .flex .navbar a { 
margin: 0 1rem; 
font-size: 2rem; 
color: var(--white); 
border-radius: .5rem; 
padding: .5rem ; 


.header .flex .navbar a.active, 
-header .flex .navbar a:hover { 
Color: #fff; 
background: var(--main-color); 


.header .flex .icons>* { 
font-size: 2.5rem; 
cursor: pointer; 
color: var(--light-color); 
margin-left: 1.7rem; 


.header .flex .icons>*:hover I 
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color: var(--main-color); 


.header .flex .profile { 
position: absolute; 
top: 125%; 
right: 2rem; 
background-color: var(--white); 
box-shadow: var(--box-shadow); 
border: var(--border); 
border-radius: .5rem; 
padding: 2rem; 
padding-top: 1rem; 
width: 30rem; 
display: none; 
animation: fadeln .2s linear; 


} 
@keyframes fadeln { 
0% { 
transform: translateY(1rem); 


} 


-header .flex .profile p { 
margin-bottom: 1rem; 
font-size: 2rem; 
text-align: center; 
color: var(--black); 


-header .flex .profile.active { 
display: inline-block; 


#menu-bin I 
display: none; 


.dashboard .box-container { 
display: grid; 
grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr)); 
gap: 1.5rem; 
align-items: flex-start; 


dashboard .box-container .box I 
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text-align: center; 
background-color: var(--white); 
border: var(--border); 
box-shadow: var(--box-shadow); 
border-radius: .5rem; 

text-align: center; 

padding: 1.5rem; 


.dashboard .box-container .box h3 { 
font-size: 2.7rem; 
color: var(--black); 


.dashboard .box-container .box h3 span { 
font-size: 2rem; 


«dashboard .box-container .box p I 
padding: 1.5rem; 
border-radius: .5rem; 
background-color: var(--light-bg); 
border-radius: .5rem; 
font-size: 1.8rem; 
border: var(--border); 
margin: 1rem 0; 
color: var(--light-color); 


.add-products form { 
margin: 0 auto; 
max-width: 50rem; 
background-color: var(--white); 
border-radius: .5rem; 
box-shadow: var(--box-shadow); 
border: var(--border); 
padding: 2rem; 
text-align: center; 


} 

.add-products form h3 I 
margin-bottom: 1rem; 
font-size: 2.5rem; 
color: var(--black); 
text-transform: capitalize; 
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.add-products form .box I 
background-color: var(--light-bg); 
border: var(--border); 
width: 100%; 
padding: 1.4rem; 
font-size: 1.8rem; 
color: var(--black); 
border-radius: .5rem; 
margin: 1rem 0; 

} 

.show-products .box-container I 
display: grid; 
grid-template-columns: repeat(auto-fit, 33rem); 
gap: 1.5rem; 
justify-content: center; 
align-items: flex-start; 


.show-products .box-container .box I 
background-color: var(--white); 
border-radius: .5rem; 
box-shadow: var(--box-shadow); 
border: var(--border); 
padding: 1.5rem; 


.show-products .box-container .box img { 
width: 100%; 
height: 20rem; 
object-fit: contain; 
margin-bottom: 1rem; 
} 
.show-products .box-container .box .name I 
font-size: 2rem; 
color: var(--black); 
padding: 1rem 0; 


.show-products .box-container .box .flex I 
display: flex; 
align-items: center; 
gap: 1rem; 
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justify-content: space-between; 


.show-products .box-container .box Tex .stock { 
font-size: 2rem; 
color: var(--black); 
margin: .5rem 0; 

} 

.show-products .box-container box Tex stock span { 
font-size: 1.5rem; 


.show-products .box-container .box Tex .category I 
font-size: 1.8rem; 
color: var(--main-color); 


.show-products .box-container box Tex .price { 
font-size: 2rem; 
color: var(--black); 
margin: .5rem 0; 

} 

.show-products .box-container .box Tex price span I 
font-size: 1.5rem; 


.update-product form { 
margin: 0 auto; 
max-width: 50rem; 
background-color: var(--white); 
border-radius: .5rem; 
box-shadow: var(--box-shadow); 
border: var(--border); 
padding: 2rem; 


.update-product form img { 
height: 25rem; 
width: 100%; 
object-fit: contain; 


.update-product form .box { 
background-color: var(--light-bg); 
border: var(--border); 
width: 100%; 
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padding: 1. Arem: 
font-size: 1.8rem; 
color: var(--black); 
border-radius: .5rem; 
margin: 1rem 0; 


.update-product form textarea { 
height: 15rem; 
resize: none; 


.update-product form span { 
font-size: 1.7rem; 
color: var(--black); 


.placed-orders .box-container { 
display: grid; 
grid-template-columns: repeat(auto-fit, 33rem); 
gap: 1.5rem; 
justify-content: center; 
align-items: flex-start; 


.placed-orders .box-container .box I 
background-color: var(--white); 
border-radius: .5rem; 
box-shadow: var(--box-shadow); 
border: var(--border); 
padding: 2rem; 
padding-top: 1rem; 


.placed-orders .box-container .box p { 
padding: .5rem 0; 
line-height: 1.5; 
font-size: 1.8rem; 
color: var(--black); 


.placed-orders .box-container .box p span { 
color: var(--main-color); 


.placed-orders .box-container .box .drop-down { 
width: 100%; 
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margin: 1rem 0; 
background-color: var(--light-bg); 
padding: 1rem 1.4rem; 

font-size: 2rem; 

color: var(--black); 

border: var(--border); 
border-radius: .5rem; 

} 

«accounts .box-container { 
display: grid; 
grid-template-columns: repeat(auto-fit, 33rem); 
gap: 1.5rem; 
justify-content: center; 
align-items: flex-start; 

} 

«accounts .box-container .box { 
background-color: var(--white); 
border-radius: .5rem; 
box-shadow: var(--box-shadow); 
border: var(--border); 
padding: 2rem; 
padding-top: 1rem; 
text-align: center; 

} 

«accounts .box-container .box p I 
padding: .5rem 0; 
font-size: 1.8rem; 
color: var(--black); 

} 

«accounts .box-container .box p span { 
color: var(--main-color); 

} 

.messages .box-container { 
display: grid; 
grid-template-columns: repeat(auto-fit, 33rem); 
gap: 1.5rem; 
justify-content: center; 
align-items: flex-start; 

} 


.messages .box-container .box { 
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background-color: var(--white); 
border-radius: .5rem; 
box-shadow: var(--box-shadow); 
border: var(--border); 
padding: 2rem; 
padding-top: 1rem; 

} 

.messages .box-container box pl 
padding: .5rem 0; 
font-size: 1.8rem; 
color: var(--black); 

} 

.messages .box-container .box p span { 
color: var(--main-color); 

} 

/* media queries */ 

@media (max-width:991 px) { 
html { 

font-size: 55%; 


} 


} 
@media (max-width:768px) { 
#menu-bin I 
display: inline-block; 


-header .flex .navbar { 
position: absolute; 
top: 99%; 
left: 0; 
right: 0; 
border-top: var(--border); 
border-bottom: var(--border); 
background-color: var(--white); 
clip-path: polygon(0 0, 100% 0, 100% 0,0 0); 
transition: .2s linear; 


-header .flex .navbar.active { 
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 


.header .flex navbar a ( 
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display: block; 
margin: 2rem; 


) 


} 
@media (max-width:450px) { 
html { 
font-size: 50%; 


} 

flex-btn ( 
flex-flow: column; 
gap: 0; 


} 

-heading { 
font-size: 3rem; 

} 

.show-products .box-container { 
grid-template-columns: 1fr; 


.placed-orders .box-container { 
grid-template-columns: 1fr; 


«accounts .box-container { 
grid-template-columns: 1fr; 


Css/style.css 
(import 
url(‘https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;70 
0&display=swap"); 
‘root I 
--darkred: rgb(126, 3, 3); 
--black: 4000000; 
--white: rgb(253, 253, 253); 
--light-color: 4666; 
--box-shadow: 0. 5 rem 1.5rem rgba(0, 0, 0, .1); 
--border: .2rem solid var(--black); 
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font-family: 'Nunito', sans-serif; 
margin: 0; 

padding: 0; 

box-sizing: border-box; 
text-decoration: none; 

outline: none; 

border: none; 

transition: all .2s linear; 


selection { 
background-color: var(--yellow); 
color: var(--black); 


::-webkit-scrollbar I 
height: .5rem; 
width: 1rem; 


::-webkit-scrollbar-track { 
background-color: transparent; 


::-webkit-scrollbar-thumb ( 


background-color: var(--darkred); 


) 
html { 


font-size: 62.5%; 
overflow-x: hidden; 
scroll-padding-top: 5.5rem; 
scroll-behavior: smooth; 


} 


section { 


padding: 1rem 7%; 


section:nth-child(even) { 


background: #eee; 


} 
.sub-heading I 


text-align: center; 
color: var(--darkred); 
font-size: 2rem; 
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padding-top: 1rem; 


.ulo I 
text-align: center; 
color: #000; 
font-size: 3rem; 
padding-top: 2rem; 


.title { 
text-align: center; 
margin-bottom: 2.5rem; 
font-size: 4rem; 
color: #000; 
text-transform: uppercase; 
text-decoration: underline; 
text-underline-offset: 1rem; 


.heading ( 
display: flex; 
align-items: center; 
justify-content: center; 
gap: 1rem; 
flex-flow: column; 
background-color: darkred; 
min-height: 20rem; 


} 

.heading h3 { 
font-size: 5rem; 
color: var(--black); 
text-transform: capitalize; 

} 

.form-container form h2 { 
font-size: 1.5rem; 
color: var(--darkred); 
text-transform: uppercase; 
margin-bottom: frem; 


) 

heading h4 { 
font-size: 5rem; 
color: var(--white); 
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text-transform: capitalize; 
} 
.form-container form h5 { 
font-size: 1.3rem; 
color: var(--black); 
text-transform: uppercase; 
margin-bottom: 1rem; 
text-align: left; 


} 

.heading p { 
font-size: 2.3rem; 
color: var(--black); 


) 
.heading p a I 
color: lightcoral; 


.heading p a:hover { 
text-decoration: underline; 
color: var(--white); 

} 

.btn, 

.delete-btn ( 
margin-top: 1rem; 
display: inline-block; 
font-size: 1.7rem; 
padding: 1rem 3rem; 
cursor: pointer; 
text-transform: capitalize; 
transition: .2s linear; 


} 

.btn { 
background-color: var(--darkred); 
color: var(--white); 


} 

.delete-btn { 
background-color: var(--black); 
color: var(--white); 


.btn:hover, 
.delete-btn:hover ( 


letter-spacing: .2rem; 


} 

.disabled { 

Opacity: .5; 
user-select: none; 
pointer-events: none; 

} 

.message { 
position: sticky; 
top: 0; 
max-width: 1200px; 
margin: 0 auto; 
padding: 2rem; 
display: flex; 
align-items: center; 
gap: 1rem; 
justify-content: space-between; 
background-color: var(--darkred); 

} 

.message span { 
font-size: 2rem; 
color: var(--black); 

} 

message i { 
font-size: 2.5rem; 
color: var(--red); 
cursor: pointer; 

} 

.message i:hover { 
color: var(--black); 

} 

.empty { 
border: var(--border); 
padding: 1.5rem; 
text-align: center; 
width: 100%; 
font-size: 2rem; 
text-transform: capitalize; 
color: var(--red); 
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flex-btn { 
display: flex; 
gap: 1rem; 


header { 
position: sticky; 
top: 0; 
left: 0; 
right: 0; 
Background: rgb(0, 0, 0); 
z-index: 1000; 


box-shadow: var(--box-shadow); 


header Tex { 
display: flex; 
align-items: center; 


justify-content: space-between; 


position: relative; 


header .flex .logo { 
color: var(--white); 
font-size: 2.5rem; 
font-weight: bolder; 


header .flex .logo i { 
color: var(--darkred); 


header .flex .navbar a { 
font-size: 1.7rem; 
border-radius: .5rem; 
padding: .5rem 1.5rem; 
color: var(--white); 

} 

header .flex .navbar a.active, 

header .flex .navbar a:hover { 
Color: #fff; 
background: var(--darkred); 


header .flex .icons>* I 
cursor: pointer; 
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margin-left: .5rem; 
height: 4.5rem; 
line-height: 4.5rem; 
width: 4.5rem; 
text-align: center; 
font-size: 1.7rem; 
color: var(--black); 
border-radius: 50%; 
background: #eee; 


header .flex .icons i, 

header .flex .icons a { 
cursor: pointer; 
margin-left: .5rem; 
height: 4.5rem; 
line-height: 4.5rem; 
width: 4.5rem; 
text-align: center; 
font-size: 1.7rem; 
color: var(--black); 
border-radius: 50%; 
background: #eee; 


header .flex .icons>*:hover { 
Color: #fff; 
background: var(--darkred); 
transform: rotate(360deg); 


header Tex .icons i:hover, 
header .flex .icons a:hover { 
Color: #fff; 
background: var(--darkred); 
transform: rotate(360deg); 


header .flex .icons span { 
font-size: 2rem; 


header .flex .icons #menu-btn I 


display: none; 
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header .flex .profile { 
background-color: var(--white); 
border: var(--border); 
padding: 1.5rem; 
text-align: center; 
position: absolute; 
top: 125%; 
right: 2rem; 
width: 30rem; 
display: none; 
animation: fadeln .2 linear; 


header .flex .profile.active { 
display: inline-block; 


} 
@keyframes fadeln { 
0% { 
transform: translateY(1rem); 


} 


header .flex .profile .name { 
font-size: 2rem; 
color: var(--black); 
margin-bottom: .5rem; 


header .flex .profile .account { 
margin-top: 2rem; 
font-size: 2rem; 
color: var(--light-color); 


header .flex .profile .account a { 
color: var(--black); 


header .flex .profile .account a:hover { 


color: var(--darkred); 
text-decoration: underline; 


.search-form form { 
display: flex; 
gap: 1.3rem; 
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.search-form form .box I 
width: 100%; 
border: var(--border); 
padding: 1.4rem; 
font-size: 1.8rem; 
color: var(--black); 


.search-form form .fa-search I 
width: 6rem; 
background-color: var(--black); 
color: var(--white); 
cursor: pointer; 
font-size: 2.5rem; 


.search-form form .fa-search:hover { 
background-color: var(--darkred); 
color: var(--black); 


-homerun{ 

display: flex; 

align-items: center; 

justify-content: center; 

background: url(..//PICTURES/Pink\ Photo\ Banner\ Facebook\ Cover\ 
Photo.gif) no-repeat; 

background-repeat: center; 

background-size: cover; 

padding-top: 17rem; 

padding-bottom: 25rem; 


-home .home-slider .slide { 
display: flex; 
align-items: center; 
flex-wrap: wrap; 
gap: 2rem; 
padding-top: 9rem; 


-home .home-slider .slide .content { 
flex: 1 1 45rem; 


} 
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-home .home-slider .slide .image { 
flex: 1 1 45rem; 

} 

-home .home-slider .slide .image img { 
width: 100%; 


-home .home-slider .slide .content span { 
color: var(--black); 
font-size: 2.5rem; 


-home .home-slider .slide .content h3 { 
color: var(--darkred); 
font-size: 7rem; 


-home .home-slider .slide .content p { 
color: var(--light-color); 
font-size: 2.2rem; 
padding: .5rem 0; 
line-height: 1.5; 
} 
.swiper-pagination-bullet-active { 
background: var(--darkred); 
} 
.menu .box-container { 
display: grid; 
grid-template-columns: repeat(auto-fit, minmax( 28rem, 1fr)); 
gap: 1.5rem; 
} 
.menu .box-container .box { 
padding: 2.5rem; 
background: #fff; 
border-radius: .5rem; 
border: .1rem solid rgb(0, 0, 0); 
box-shadow: var(--box-shadow); 
position: relative; 
overflow: hidden; 
text-align: center; 
} 
.menu .box-container .box .fa-shopping-cart, 
.menu .box-container .box .fa-eye { 
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position: absolute; 
top: 1.5rem; 
background: #eee; 
border-radius: 50; 
height: 5rem; 
width: 5rem; 
line-height: 5rem; 
font-size: 2rem; 
color: var(--black); 
} 
.menu .box-container .box .fa-shopping-cart:hover, 
.menu .box-container .box .fa-eye:hover ( 
background: #fff; 
color: var(--darkred); 
} 
.menu .box-container .box .fa-shopping-cart { 
right: -15rem; 
} 
.menu .box-container .box .fa-eye { 
left: -15rem; 
} 
.menu .box-container .box:hover .fa-shopping-cart { 
right: 1.5rem; 
} 
.menu .box-container .box:hover .fa-eye { 
left: 1.5rem; 
} 
.menu .box-container .box img { 
height: 17rem; 
margin: 1rem 0 
} 
.menu .box-container .box .h3 { 
color: var(--black); 
font-size: 2.5rem; 
} 
.menu .box-container .box .stars { 
padding: 1rem 0; 
} 
.menu .box-container .box .stars i { 
font-size: 1.7rem; 
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color: var(--darkred); 

} 

.menu .box-container .box .price { 
margin-right: auto; 
font-size: 2.5rem; 
color: var(--black); 

} 

.menu .box-container .box span { 
color: #000; 
font-weight: bolder; 
margin-right: 1 rem; 
font-size: 2.5rem; 

} 

.about row I 
display: flex; 
flex-wrap: wrap; 
gap: 1.5rem; 
align-items: center; 

) 

.about .row .image ( 
flex: 1 1 45rem; 

} 

«about row .image img { 
width: 100%; 
left: 1.5rem; 

} 

«about row .content { 
flex: 1 1 45rem; 

} 

«about row Content h3 I 
color: #000; 
font-size: 4rem; 
padding: .5rem o; 

} 

«about row .content p ( 
color: var(--light-color); 
font-size: 1.5rem; 
padding: .5rem o; 
line-height: 2; 

) 
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«about row Content .icons-container I 
display: flex; 
gap: 1rem; 
flex-wrap: wrap; 
padding: 1rem 0; 
margin-top: .5rem; 
} 
«about row Content .icons-container .icons { 
background: #eee; 
border-radius: .5rem; 
border: .1rem solid rgba(0, 0, 0, .2); 
display: flex; 
align-items: center; 
justify-content: center; 
gap: 1rem; 
flex: 1 1 17rem; 
padding: 1.5rem; 
} 


«about row Content .icons-container .icons i { 
font-size: 2.5rem; 
color: var(--darkred); 

} 

about .row Content .icons-container .icons span I 
font-size: 1.5rem; 
color: #000; 

} 

menu .box-container I 
display: grid; 
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); 
gap: 1.5rem; 

} 

.menu .box-container .box { 
background: #fff; 
border: .1rem solid rgba(0, 0, 0, .2); 
border-radius: .5rem; 
box-shadow: var(--box-shadow); 
overflow: hidden; 


} 


.menu .box-container .box .image { 
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height: 25rem; 
width: 100%; 
padding: 1.5rem; 
overflow: hidden; 
position: relative; 

} 

.menu .box-container box .image img I 
height: 100%; 
width: 100%; 
border-radius: .5rem; 
object-fit: cover; 

} 

.menu .box-container .box Image .fa-shopping-cart { 
position: absolute; 
top: 2.5rem; 
right: 2.5rem; 
height: 5rem; 
width: 5rem; 
line-height: 5rem; 
text-align: center; 
font-size: 2rem; 
background: #fff; 
border-radius: 50%; 
color: var(--black); 

} 

.menu .box-container { 
display: grid; 
grid-template-columns: repeat(auto-fit, 33rem); 
justify-content: center; 
align-items: flex-start; 
gap: 1.5rem; 

} 

.menu .box-container .box { 
border: var(--border); 
padding: 1.5rem; 
position: relative; 
overflow: hidden; 

} 

.menu .box-container .box img { 
height: 25rem; 
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width: 100%; 
object-fit: contain; 
margin-bottom: 1rem; 
} 
.menu .box-container .box .fa-eye, 
.menu .box-container .box .fa-shopping-cart { 
position: absolute; 
top: 1rem; 
height: 4.5rem; 
width: 4.5rem; 
line-height: 4.3rem; 
border: var(--border); 
background-color: var(--white); 
cursor: pointer; 
font-size: 2rem; 
color: var(--black); 
transition: .2s linear; 
text-align: center; 
} 
.menu .box-container box .fa-eye:hover, 
.menu .box-container .box .fa-shopping-cart:hover { 
background-color: darkred; 
color: var(--white); 
} 
.menu .box-container .box .fa-eye { 
left: -10rem; 
} 
.menu .box-container .box .fa-shopping-cart { 
right: -10rem; 
} 
.menu .box-container .box:hover .fa-eye { 
left: frem; 
} 
.menu .box-container .box:hover .fa-shopping-cart { 
right: 1rem; 
} 
.menu .box-container .box .cat { 
font-size: 1.8rem; 
color: var(--light-color); 


} 
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.menu .box-container .box .cat:hover { 
color: var(--black); 
text-decoration: underline; 

} 

.menu .box-container .box .name { 
font-size: 3rem; 
color: var(--black); 
margin: 1rem 0; 

} 

.menu .box-container .box .flex { 
display: flex; 
align-items: center; 
gap: 1rem; 
margin-top: 1.5rem; 


.menu .box-container .box Tex .price { 
margin-right: auto; 
font-size: 2.5rem; 
color: var(--black); 

} 

.menu .box-container .box Tex .price span { 
color: black; 
font-size: 1.8rem; 

} 

.menu .box-container .box Tex .qty I 
padding: frem; 
border: var(--border); 
font-size: 1.8rem; 
color: var(--box-shadow); 

) 

.menu .box-container .box Tex .fa-edit { 
width: 5rem; 
background-color: var(--darkred); 
color: var(--black); 
cursor: pointer; 
font-size: 1.8rem; 
height: 4.5rem; 
border: var(--border); 


) 


.menu .box-container .box Tex .fa-edit:hover { 
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background-color: var(--black); 
color: var(--white); 

} 

.menu .box-container .box .fa-times { 
position: absolute; 
top: 1rem; 
right: 1rem; 
background-color: var(--red); 
color: var(--white); 
border: var(--border); 
line-height: 4rem; 
height: 4.3rem; 
width: 4.5rem; 
cursor: pointer; 
font-size: 2rem; 

} 

.menu .box-container .box .fa-times:hover { 
background-color: var(--black); 
color: var(--white); 

} 

.menu .box-container .box .sub-total { 
margin-top: 1rem; 
font-size: 1.8rem; 
color: var(--light-color); 

} 

.menu .box-container .box .sub-total span { 
color: var(--red); 


.menu .more-btn { 
margin-top: 1rem; 
text-align: center; 


menu .cart-total { 
display: flex; 
align-items: center; 
gap: 1.5rem; 
flex-wrap: wrap; 
justify-content: space-between; 
margin-top: 3rem; 
border: var(--border); 
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padding: 1rem; 


"menu .cart-total p I 
font-size: 2.5rem; 
color: var(--light-color); 

} 

menu .cart-total p span { 
color: var(--red); 

} 

menu .cart-total .btn { 
margin-top: 0; 


«steps .box-container ( 
display: grid; 
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); 
gap: 1.5rem; 
align-items: flex-start; 
) 
«steps .box-container .box { 
text-align: center; 
border: var(--border); 
padding: 2rem; 


«steps .box-container box img { 
height: 15rem; 
width: 100%; 
object-fit: contain; 
margin-bottom: frem; 

) 

.steps .box-container .box h3 { 
font-size: 2.3rem; 
margin: 1rem 0; 
color: var(--black); 
text-transform: capitalize; 

} 

«steps .box-container .box p ( 
line-height: 2; 
font-size: 1.6rem; 
color: var(--light-color); 


} 
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} 


} 


review .slide { 
padding: 2rem; 
box-shadow: var(--box-shadow); 
border: .1rem solid rgba(0, 0, 0, .2); 
border-radius: .5rem; 
position: relative; 


review .slide .fa-quote-right { 
position: absolute; 
top: 2rem; 
right: 2rem; 
font-size: 6rem; 
color: #ccc; 


review .slide .user { 
display: flex; 
gap: 1.5rem; 
align-items: center; 
padding-bottom: 1.5rem; 


review .slide .user img { 
height: 7rem; 
width: 7rem; 
border-radius: 50%; 
object-fit: cover; 


review .slide .user h3 { 
color: var(--black); 
font-size: 2rem; 
padding-bottom: .5rem; 


review .slide .user i { 
font-size: 1.3rem; 
color: var(--darkred); 


review .slide p { 
font-size: 1.5rem; 
line-height: 1.8; 
color: var(--light-color); 
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.contact .row { 
display: flex; 
align-items: center; 
flex-wrap: wrap; 
gap: 1.5rem; 

} 

contact .row .image { 
flex: 1 1 40rem; 

) 

contact row .image img I 
width: 100%; 

) 

.contact .row form ( 
border: var(--border); 
flex: 1 1 40rem; 
padding: 2rem; 
text-align: center; 

} 

contact row form h3 { 
font-size: 2.5rem; 
color: var(--black); 
margin-bottom: 1rem; 
text-transform: capitalize; 

} 

contact row form .box { 
margin: 1rem 0; 
font-size: 1.8rem; 
color: var(--black); 
border: var(--border); 
padding: 1.4rem; 
width: 100%; 

} 

orders .box-container { 
display: flex; 
flex-wrap: wrap; 
gap: 1.5rem; 
align-items: flex-start; 


.orders .box-container .box { 
padding: 1rem 2rem; 
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border: var(--border); 
flex: 1 1 40rem; 
} 
orders .box-container .box p { 
line-height: 1.5; 
margin: 1rem 0; 
font-size: 2rem; 
color: var(--light-color); 
} 
«orders .box-container box p span I 
color: var(--black); 


order form { 
max-width: 90rem; 
border-radius: .5rem; 
box-shadow: var(--box-shadow); 
border: .1rem solid rgba(0, 0, 0, .2); 
background: #fff; 
padding: 1.5rem; 
margin: 0 auto; 

} 

.order form .inputBox { 
display: flex; 
flex-wrap: wrap; 
justify-content: space-between; 


.order form .inputBox .input { 
width: 49%; 

} 

.order form .inputBox .input span { 
display: block; 
padding: .5rem 0; 
font-size: 1.5rem; 
color: var(--light-color); 

} 

.order form .inputBox .input input, 

.order form .inputBox .input textarea { 
background: #eee; 
border-radius: .5rem; 
padding: .5rem; 
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font-size: 1.6rem; 
color: var(--black); 
text-transform: none; 
margin-bottom: 1rem; 
width: 100%; 


.order form .inputBox .input input:focus, 

.order form .inputBox .input textarea:focus { 
border: .1rem solid var(--darkred); 

} 

.order form .inputBox .input textarea { 
height: 20rem; 
resize: none; 


.order form .btn ( 
margin-top: 0; 


.checkout form ( 
max-width: 50rem; 
margin: O auto; 
border: var(--border); 
padding: 2rem; 


.checkout form h3 ( 
font-size: 2.5rem; 
text-transform: capitalize; 
padding: 2rem 0; 
color: var(--black); 


.checkout form .cart-items ( 
background-color: var(--black); 
padding: 2rem; 
padding-top: 0; 


.checkout form .cart-items h3 ( 
color: var(--white); 


.checkout form .cart-items p ( 


display: flex; 
align-items: center; 
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gap: 1.5rem; 

justify-content: space-between; 
margin: 1rem 0; 

line-height: 1.5; 

font-size: 2rem; 


.checkout form .cart-items p .name { 
color: var(--white); 


.checkout form .cart-items .amount .name { 
color: var(--black); 


.checkout form .cart-items p .price { 
color: var(--darkred); 


.checkout form .cart-items .amount { 
background-color: var(--white); 
padding: .5rem 1.5rem; 


.checkout form .cart-items .amount .price { 
color: var(--red); 


.checkout form .user-info p { 
font-size: 2rem; 
line-height: 1.5; 
padding: 1rem 0; 


.checkout form .user-info p i { 
color: var(--light-color); 
margin-right: 1rem; 


.checkout form .user-info p span { 
color: var(--black); 


.checkout form .user-info .box { 
width: 100%; 
border: var(--border); 
padding: 1.4rem; 
margin-top: 2rem; 
margin-bottom: 1rem; 
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font-size: 1.8rem; 

} 

.form-container form { 
border: var(--border); 
margin: 0 auto; 
max-width: 50rem; 
padding: 2rem; 
text-align: center; 

} 

.form-container form .form-control { 
margin: .7rem 0; 
width: 100%; 
border: var(--border); 
padding: 1.4rem; 
font-size: 1.8rem; 
color: var(--black); 

} 

.form-container form h3 { 
font-size: 2.5rem; 
color: var(--black); 
text-transform: uppercase; 
margin-bottom: 1rem; 

} 

.form-container form h4 { 
font-size: 1.5rem; 
color: var(--darkred); 
text-transform: uppercase; 
margin-bottom: frem; 
text-align: left; 

) 

.form-container form h5 { 
font-size: 1.3rem; 
color: var(--black); 
text-transform: uppercase; 
margin-bottom: frem; 
text-align: left; 

) 

.form-container form .box { 
margin: .7rem 0; 
width: 100%; 
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border: var(--border); 
padding: 1. Arem: 
font-size: 1.8rem; 
color: var(--black); 

} 

.form-container form p { 
margin-top: 1.5rem; 
font-size: 2rem; 
color: var(--light-color); 

} 

.form-container form p a { 
color: var(--black); 

} 


.form-container form p a:hover { 
text-decoration: underline; 


.user-details .user { 
max-width: 50rem; 
margin: 0 auto; 
border: var(--border); 
padding: 2rem; 


.user-details .user img { 
width: 100%; 
height: 20rem; 
object-fit: contain; 
margin-bottom: 1rem; 


.user-details .user p { 
padding: 1rem 0; 
line-height: 1.5; 
font-size: 2rem; 


.user-details .user p span { 
color: var(--black); 


.user-details .user p i { 
margin-right: 1rem; 
color: var(--light-color); 


} 
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.user-details user .address { 
margin-top: 1rem; 


.quick-view form I 
max-width: 40rem; 
padding: 2rem; 
border: var(--border); 
position: relative; 
margin: 0 auto; 


.quick-view form img ( 
height: 25rem; 
width: 100%; 
object-fit: contain; 
margin-bottom: frem; 


.quick-view form .cat I 
font-size: 1.8rem; 
color: var(--light-color); 


.quick-view form .cat:hover I 
color: var(--black); 
text-decoration: underline; 


.quick-view form .name ( 
font-size: 2rem; 
margin: .5rem 0; 


.quick-view form .flex { 
display: flex; 


justify-content: space-between; 


align-items: center; 
gap: 1.5rem; 
margin: 1rem 0; 


.quick-view form .flex .price { 
font-size: 2.5rem; 
color: var(--black); 


} 


.quick-view form Tex .price span I 
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font-size: 2rem; 
color: var(--light-color); 


.quick-view form .flex .qty { 
border: var(--border); 
padding: 1rem; 
font-size: 1.8rem; 
color: var(--black); 

} 

.quick-view form .cart-btn { 
width: 100%; 
padding: 1rem 3rem; 
text-align: center; 
border: var(--border); 
font-size: 2rem; 
color: var(--black); 
cursor: pointer; 
text-transform: capitalize; 
background: none; 
margin-top: 1rem; 


.quick-view form .cart-btn:hover I 
background-color: var(--black); 
color: var(--white); 


j 
footer .grid { 
display: grid; 
grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr)); 
gap: 1.0 rem; 
align-items: flex-start; 


footer .grid .box { 
border: var(--border); 
padding: 1rem; 
text-align: center; 


footer .grid .box img I 
height: 10rem; 
width: 100%; 
object-fit: contain; 
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margin-bottom: .5rem; 


} 

footer .grid .box h3 { 
margin: 1rem 0; 
font-size: 2rem; 
color: var(--black); 
text-transform: capitalize; 


footer .grid .box p, 

footer od .box a I 
display: block; 
font-size: 1.5rem; 
color: var(--light-color); 
line-height: 1.8; 


footer od box a:hover { 
text-decoration: underline; 

} 

.credit { 
padding: 3rem 2rem; 
text-align: center; 
background-color: var(--black); 
color: var(--white); 
font-size: 2rem; 
text-transform: capitalize; 
/* padding-bottom: 10rem; */ 


.loader-container { 
position: fixed; 
top: 0; 
left: 0; 
height: 100%; 
width: 100%; 
z-index: 10000; 
background: #fff; 
display: flex; 
align-items: center; 
justify-content: center; 
overflow: hidden; 


.loader-container img { 
width: 35rem; 


.loader-container.fade-out { 
top: -110%; 
opacity: 0; 


/*media queries */ 
@media(max-width:991 px) { 
html { 
font-size: 55%; 


header { 
padding: 1rem 2rem; 


section ( 
padding: 2rem; 
} 
-homerun { 
height: auto; 
width: 100%; 
padding-top: 10rem; 
padding-bottom: 15rem; 
} 


} 
@media(max-width:768px) { 
header .flex .icons #menu-btn { 
display: inline-block; 


header .flex .navbar { 
position: absolute; 
top: 100%; 
left: 0; 
right: 0; 
background: var(--darkred); 
border-top: .1rem solid rgb(253, 253, 253); 
border-bottom: .1rem solid rgb(253, 253, 253); 
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); 


header .flex .navbar.active { 
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clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); 


header Tex .navbar a I 
display: block; 
padding: 1.5rem; 
margin: 1rem; 
font-size: 2rem; 
background: #7a3030; 

} 

#search-form #search-box { 
width: 90%; 

} 

} 


-home .home-slider .slide .content h3 { 
font-size: 5rem; 


} 
@media(max-width:991 px) { 
html { 
font-size: 50%; 
} 
.menu .box-container .box img { 
height: auto; 
width: 100%; 
} 
} 


Js/admin_script.js 

let profile = document.querySelector('.header .flex .profile"); 

document.querySelector('#user-btn').onclick = () => { 
profile.classList.toggle('active") 
navbar.classList.remove('active”); 


let navbar = document.querySelector('.header Tex .navbar'); 

document.querySelector('#menu-btn').onclick = () => { 
navbar.classList.toggle('active'); 
profile.classList.remove('active'); 


} 
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window.onscroll = () => { 
profile.classList.remove('active'); 
navbar.classList.remove('active”); 


) 


sublmages = document.querySelectorAll('.update-product .image-container 
.sub-images img”); 
mainlmage = document.querySelector('.update-product .image-container .main- 
image img’); 
sublmages.forEach(images => { 
images.onclick = () => { 
let src = images.getAttribute('src'); 
mainlmage.src = src; 


) 
pi 


Js/script.js 

navbar = document.querySelector('header .flex navbar): 

document.querySelector('#menu-btn').onclick = () => { 
navbar.classList.toggle('active'); 
menu.classList.remove('fa-times'); 


profile = document.querySelector('header .flex .profile"); 

document.querySelector('#user-btn').onclick = () => { 
profile.classList.toggle('active"); 
navbar.classList.remove('active”); 

} 

window.onscroll = () => { 
navbar.classList.remove('active'); 
profile.classList.remove('active'); 


function loader() { 
document.querySelector('.loader').style.display = none 
} 
var swiper = new Swiper(".home-slider", I 
spaceBetween: 30, 
centeredSlides: true, 
autoplay: I 
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delay: 7500, 
disableOnlnteraction: false, 
b 
pagination: { 
el: ".swiper-pagination", 
clickable: true, 
b 


loop: true, 


}); 
function fadeOut() { 
setinterval(loader, 2000); 


window.onload = fadeOut; 
document.querySelectorAll(‘input[type="number"]').forEach(numberlnput => { 
numberlnput.oninput = () => { 
if (numberlnput.value.length > numberlnput.maxLength) numberlnput.value 
= numberlnput.value.slice(0, numberlnput.maxLength); 
y 
$("input[data-type="currency']").on(( 
keyup: function(){ 
formatCurrency($(this)) 
da 
blur: function(){ 
formatCurrency($(this), "blur") 
} 
}) 


function formatNumber(n){ 
// 1000000 to 1,2334,0000 
return n.replace(AD/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",") 
} 
function formatCurrency(input, blur) { 
var input val = input.val(); 
if(input val === "") {return ;) 
var original_len = input_val.length; 
var caret pos = input.prop("selectionStart"); 
if(input_val.indexOf(".") >= 0){ 
var decimal_pos = input_val.indexOf("."); 
var left side = input val.substring(0, decimal pos); 
var right side = input val.substring(decimal pos); 
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left side = formatNumber(left side); 
right side = formatNumber(right_side); 
if (blur === "blur"Y 

right_side += "00"; 
} 


right_side = right_side.substring(0, 2); 

input val = "P" + left side + "." + right side; 
Jelsef 

input val = formatNumber(input val); 

input val = "P" + input val; 

if(blur === "blur"){ 

input val += ".00"; 
j 


input.val(input val); 

var update len = input val.length; 

caret pos - update len - original len + caret pos; 
input[0].setSelectionRange(caret pos, caret pos); 
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APPENDICES B 


Evaluation Tool 


CJZAVE BBQ & GRILL OFFICIAL WEBSITE 


I. Personal Information 


Name: (Optional) Sex: Male ___ Female 


Il. Evaluation 


Please visit the website that was sent to your email address. Then, after using the 


system, assess the proposed system's features. Please rate the level by placing 


a checkmark (V) in the appropriate column of your assessment. Use the scale 


below: 

Point Range Scale Description Interpretation 
5 4.21-5.00 Strongly Agree Highly Acceptable 
4 3.41-4.20 Agree Acceptable 
3 2.61-3.40 Fairly Disagree Fair 
2 1.81-2.60 Disagree Uncertain 
1 1.00-1.80 Strongly Disagree Not Acceptable 
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A. Functionality 


Evaluation Criteria 


1. Functional Appropriateness 
The system facilitates and makes an easier way to 


carry out particular tasks. 


2. Functional Completeness 
Every responsibility and users goal are included in 


the system. 


3. Functional Correctness 


The technology generates an accurate outcome. 


B. Efficiency 


Evaluation Criteria 


1. Capacity 
The system's possible parameter restrictions adhere 


to the requirements. 


2. Time Behavior 
When performing it's functions, the reaction of the 


system and processing periods, meets the criteria. 
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3. Resource Utilization 
The quantity and types of the resources was utilized 
by the system to complete its tasks and satisfy the 


requirements. 


C. Compatibility 


Evaluation Criteria 


1. Co-Existence 
The system is capable in operating successfully 
while sharing a common phase and resources with 


other 


2. Interoperability 
The system has the ability to use and exchange 


information. 


D. Usability 


Evaluation Criteria 


1. Operability 
The system includes features that make it easy to 


use and control. 
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2. Appro 
priateness Recognizability 
Users can use the system to check if it is suited to 


their requirements 


3. Learnability 

The system can be used by specific users to 
accomplish specific goals, such as learning to use 
the program successfully, quickly, safely, and 


satisfactorily in a particular environment. 


4. Accessibility 
The system can be used by people with the widest 
range of characteristics and capabilities to achieve 


a specified goal in a specified context of use. 


E. Maintainability 


Evaluation Criteria 


1. Modifiability 
The system might be modified immediately and 
efficiently fixed without losing any of its quality and 


data. 
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2. Analyzability 
Whenever a user signs up their data, then the log-in 
credentials doesn't match, the system can easily 


analyze it. 


F. Portability 


Evaluation Criteria 


1. Adaptability 

The product or system's services can work 
efficiently and effectively modified for new or 
changing hardware applications or other operational 


Use. 


G. Reliability 


Evaluation Criteria 


1. Recoverability 
The system is capable of recovering the desired 
condition and recovers immediately data that was 


affected. 
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2. Availability 
The system is functioning properly and generates 


easily when it is needed. 


3. Fault Tolerance 
Even if there are software or hardware flaws, the 


system will work as planned. 


H. Security 


Evaluation Criteria 


1. Integrity 
The system protects computer programs and data 


from illegal access or change. 


2. Confidentiality 
The system makes sure that only people who has 


the rights would be access the data. 


3. Non-Repudiation 
The system can be verified, therefore the events or 


actions cannot be denied. 
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APPENDICES C 


Summary of Results 


CJZAVE BBQ & GRILL OFFICIAL WEBSITE 


Point Range Scale Description Interpretation 
5 4.21-5.00 Strongly Agree Highly Acceptable 
4 3.41-4.20 Agree Acceptable 
3 2.61-3.40 Fairly Disagree Fair 
2 1.81-2.60 Disagree Uncertain 
1 1.00-1.80 Strongly Disagree Not Acceptable 


A. Functionality 


Evaluation Criteria 5 4 3 2 1 
1. Functional Appropriateness 14 3 0 0 0 
2. Functional Completeness 12 5 0 0 0 
3. Functional Correctness 12 5 0 0 0 
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B. Efficiency 


Evaluation Criteria 


1. Capacity 


2. Time Behavior 


3. Resource Utilization 


C. Compatibility 


Evaluation Criteria 


1. Co-Existence 


11 


2. Interoperability 


11 


D. Usability 


Evaluation Criteria 


1. Operability 


10 


2. Appropriateness 


Recognizability 


3. Learnability 


11 


4. Accessibility 


12 
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E. Maintainability 


Evaluation Criteria 


1. Modifiability 


2. Analyzability 


F. Portability 


Evaluation Criteria 


1. Adaptability 


G. Reliability 


Evaluation Criteria 


1. Recoverability 


2. Availability 


3. Fault Tolerance 


H. Security 


Evaluation Criteria 


1. Integrity 


2. Confidentiality 


3. Non-Repudiation 


230 


APPENDICES D 


Survey Data Summary 


In this study, the researchers of Cjzave BBQ & GRILL Official website 
conducted an interview to gather the data needed. The proposed system was 
evaluated by using the ISO 2510:2011 standard. The data was gathered, totaled, 


analyzed and statistically handled. The scale below was used to interpret the 


respondents’ evaluation: 


POINT RANGE SCALE DESCRIPTION INTERPRETATION 


NM 4.21 — 5.00 Strongly Agree Highly Acceptable 
EN 3.41 — 4.20 Agree Acceptable 
BENE 2.61 — 3.40 Fairly Agree Fair 
BN 1.81 — 2.60 Disagree Uncertain 

1.00 — 1.80 Strongly Not Acceptable 
mE Disagree 


Table 1. Point Scale 
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*- 5 (Highly Acceptable) Refers to the evaluators who strongly agree 
$ 4 (Acceptable) Refers to the evaluators who agree 

*- 3 (Fair) Refers to the evaluators who fairly disagree 

*- 2 (Uncertain) Refers to the evaluators who disagree 


*- 1 (Not Acceptable) Refers to the evaluators who strongly disagree 


CRITERIA WEIGHTED MEAN INTERPRETATION 
Functionality 4.75 Highly Acceptable 
Efficiency 4.65 Highly Acceptable 
Compatibility 4.65 Highly Acceptable 
Usability 4.67 Highly Acceptable 
Maintainability 4.68 Highly Acceptable 
Portability 4.65 Highly Acceptable 
Reliability 4.65 Highly Acceptable 


Security 4.70 Highly Acceptable 


Table 2. Survey Data Summary 
In this table shows the proposed system data report of Cjzave BBQ & 
GRILL OFFICIAL WEBSITE. The total weighted mean was 4.68 calculated in 


the survey also interpreted as Highly Acceptable. 
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APPENDICES E 


System Manual 


INTRODUCTION 

The Cjzave BBQ & GRILL Official Website manual is only applicable and 
limited only to the management and customers of the restaurant. This manual will 
show on how to properly use the website. 

If you have any concerns and questions with regards with this sytem 
manual, feel free to contact us at this email; icollantes86@gmail.com 


CONTENT OF THIS WEBSITE 

Official website of Cjzave BBQ & GRILL displays and offers so many 
features such as having a short background of how the restaurant started, 
advertisement page wherein you can see different deals and offers, menu page 
which shows the products with its availability, contact us page, live chat, 


customer's login, online ordering, online payment method and customer's review. 


USE OF SYSTEM MANUAL 
The system manual will be a big help to customers and staffs as it will serve 
as a guide on how to properly use and manage the website. 
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User's Guide 
ACCESSING WEBSITE 


To access the website, go to your Google Chrome/Browser >> type 
“cjzave.com“ and press enter/search. Once you pressed search, you will 
automatically be directed to the official website. 


Step 1. Step 2. 


Google 


< 


© cjzave.com| 
Ber& GRILL Official Website - cjzave.com 


Q cjzave.com - Google Search 


Cjzave BBQ & GRILL 


me About Us 


; 


d 79 
OD ZAY BESO e Ais) 


KOREAN STYLE BUFFERS 
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LOG IN/REGISTER 
How to Login/Register? Click the profile icon located at the upper right 
corner of the website and click login or register. 

a. To Login, fill out the needed information such as E-mail 

Address and Password and click login if done. 
b. To Register, click the register and fill out the needed information 
such as Name, Email Address, Mobile Number, Mother’s 
Name incase you forgot your password, Password and then 


proceed to Register Now. 


Cjzave BBQ & GRILL 


A 2 ; 
WAVEREN GIL 


Y KOREAN STYLE BUFFE X 


Step 2. Step 3. 


M 


REGISTER NOW 


PASSWORD MUST dran THE FOLLOWING. 
" At tett 
Login Now Forgot Password xcd 
ie 
Mini 
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FORGOT PASSWORD 
Simply click Forgot Password >> Enter mother’s name >> Click 
Confirm button >> Enter your New Password and Confirm your New 


Password then click Update Now. 


Step 1. 
LOGIN NOW 
enter your email 
enter your password 
Forgot Password 
Step 2. 
FORGOT PASSWORD? 
enter your mother's name 
Step 3. 


enter your new passwor 


PASSWORD MUST CORTAIN THE FOLLOWING: 


se letter 
fmercase) letter 


confirm your new passv 


Update Now 
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EDIT PROFILE 
To Edit Profile, click the profile icon after logging in >> click 
profile. Your current information will show such as your Name, Mobile 


Number, Email Address and Address. Next is to click Update Info or 


Update Address. 
Step 1. 


Home AboutUs Menu Order Contact oc o 


Ivan B. Collantes 


mome 


UA ANE 


KOREAN STYLE BUFFET 


Step 2. 


Cjzave BBQ & GRILL ome AboutUs Menu Order Contact 


& Ivan B. Collantes 


& +69 9155941309 


®@ Icollantes86@gmail.com 


Q 99,Magsaysay Ave.,Balatas,in-front of seoul 
199 


Update Address 
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KNOWING ABOUT THE RESTAURANT 
To know about the restaurant, go to "About Us Page” located at the upper 
part of the website. You will then see here the different deals and offers, and if 
you scroll down there is a short history of the website and the customer's review. 


Step 1. 


KORFAN STYLE BUFFET 


Step 2. 


Cjzave BBQ & GRILL 


We OFFER!!! 


eapest deals, where you can eat al 


Price Starts at 249php. 


P Affordable Yq Good quality 
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Step 3. 


Cjzave BBQ & GRILL 


Our History 


Step 4. 


Customer's Review 


What they say: 


e Ivan e Gabby LS Mary Dianne 
< de dn n n ; ørret deos s sn à 
CY 


Ge 


VIEWING OF PRODUCTS 


There are 2 ways to view products; 


a. Menu Page - click the “Menu Page”. After clicking the Menu 


Navigation Bar, all available and not available products will be shown. You can 


choose your desired product based on its availability. To see the details of each 


product, point your cursor to your desired product and a Quick View icon will 


show at the upper left part of the product. 
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b. Search bar - click the navigation bar “Search Bar” so that you can 
easily find the products. After clicking the “Search Bar” you can type the name 


of the products that you wanted to search and it will automatically display. 


Step 1.0 


About Us Menu Order Contact 


Cjzave BBQ & GRILL Home 


lå 


KOREAN STYLE BUF RE 


Step 1.1 


"You will get Free for every worth of 500 pesos: Pajori 100g, Lettuce 100g, Kimchi 100g and Dipping 
Sauces such as Saamjang Sauce, Melted Cheese & Sweet BBQ sauce are all home-made." 


Py 
VAN 


Available Available Available Available 
Marinated Beef 500g Pork Gochujang 500g Pork Galbi 500g Chicken Gochujang 


500g 


Php 100.00 


1 


Php 250.00 


1 


Php 250.00 


1 
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Php 230.00 1 


Ip 12 QUICK VIEW 


DN 


Pork Galbi 500g 
-either kasim or pique part 


Php250 


Add To Cart 


Step 2.0 


Cjzave BBQ & GRILL 


Via Wan E CH) 
VÆRN CIIM 
KORFAN STYLE BUFFET 


Step 2.1 


Cjzave BBQ & GRILL 
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Step 2.2 


Cjzave BBQ & GRILL 


Chicken Gochujang 
500g 


Php230 1 


PLACING AN ORDER 
To place an order, you need to add your desired products to your cart. 
a. Add to Cart - Go to “Menu Page” >> point your cursor to the product 
that you want and click the cart icon located at the upper right corner, and it will 


automatically be added to your cart. 


b. Shopping Cart - click the shopping cart icon and all your added to cart 
products will display. If you want to delete your excess order, point your cursor 
to the box >> click “x” icon. And if you want to delete all your orders, simply 


click the Delete All. 


c. Proceed to Checkout - To proceed with your order >> click Proceed 
To Checkout >> double check your order summary and your information, once 


done >> click place order. 
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Step 1.0 


Cjzave BBQ & GRILL 


Step 1.1 


Home About ^^ 


Menu 


Order 


Contact 


060 


"You will get Free for every worth of 500 pesos: Pajori 100g, Lettuce 100g, Kimchi 100g and Dipping 


Available 


Marinated Beef 500g 


Php 100.00 1 


Available 


Pork Gochujang 500g 


Php 250.00 1 


Php 250.00 


Available 


Pork Galbi 500g 


m 


Step 2.0 


Cjzave BBQ & GRILL 


Home About Us 


Menu Order 


Sauces such as Saamjang Sauce, Melted Cheese & Sweet BBQ sauce are all home-made." 


Available 


Chicken Gochujang 
500g 


Php 230.00 1 
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Step 2.1 


YOUR CART 


Van 


Marinated Beef 500g 


Pork Gochujang 500g 


Step 3.0 


Step 2.2 


YOUR CART 


Marinated Beef 500g 


Pork Gochujang 500g 


Step 3.1 


et EA e |; | | meioom [ HESSEN | 
Php100.00 | Php250.00 w: Php100.00 w: Php 250.00 
cart total : Php350.00 
Continue Shopping 
ORDER SUMMARY 


Delivery Address 


O 99 Mageayzay Ave Balatas.in-tront of seoul 
199 


=i 
Ci 


Special Instruction 


Pleas ist ut nen you are Sep Ve amO er $ we naad to 
awed arten 


Strictly No Refund! 


To mcas haccle oe Beth onde Fee Gadla chacb yas anes 
204 Connect Ft bet DA yous order Thasa you! 
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ONLINE PAYMENT 
To proceed with online payment, the system will require you to log in your 
G-cash account. Log in G-cash number and press next >> type in your MPIN 
and press next >> type the OTP, and once you finished all the needed information 


you will be redirected to the website with the confirmation of your order. 


Step 1. 


Cjzave BBQ 


PHP 790.00 


Login to pay with GCash 


Step 2. 


Cjzave BBQ & GRILL bns A vier Contac 000 
We Are Preparing Your Order. Please Wait 30-45 Mins. 


THANK YOU! 


Social Media Address 


nail: thanalano@gmail.com 


Naga City, Philippines 


0905473251 
ceboc LL Cut-off time of accepting orders Globe Telecom 
© Copyright (9 By AMA BSIT Students | All Rights Reserved 


245 


VIEWING OF ORDERS 
To access order page, after the payment transaction click the “See your 


Order Here”. 


Step 1. 


About Us Menu Order Contact 


060 
We Are Preparing Your Order. Please Wait 30-45 Mins. 


Cjzave BBQ & GRILL Home 


THANK YOU! 


Step 2. 


Cjzave BBQ & GRILL 


YOUR ORDERS 


Placed on : 2023-08-03 

Name : Ivan B. Collantes 

E-mail : Icollantes86@gmail.com 
Contact Number : +69 915594 


Address ` 99, Magsaysay Ave.,Balatas,in-front of 
seoul 199 


Payment Method : G-cash 

Orders : Marinated Beef 500g (100 x 1) - .00 
Total Price : Php100.00 

Special Instruction : /- 


Payment Status : Completed 


Placed on : 2023-08-03 

Name : Ivan B. Collantes 

E-mail : Icollantes86@gmail.com 
Contact Number : +69 915594 


Address ` 99,Magsaysay Ave.,Balatas,in-front of 
seoul 199 


Payment Method : G-cash 
Orders : atsara (50 x 1) - .00 
Total Price : Php50.00 
Special Instruction : /- 


Payment Status : pending 
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Placed on : 2023-08-04 

Name : Ivan B. Collantes 

E-mail : Icollantes86@gmail.com 
Contact Number : +69 915594 


Address : 99, Magsaysay Ave. Balatas,in-front of 
seoul 199 


Payment Method : G-cash 


Orders : Bacon Cut 500g (290 x 1) - Pork 
Gochujang 500g (250 x 1) - Pork Galbi 500g 
(250 x 1) - .00 


Total Price : Php790.00 
Special Instruction : /- 


Payment Status : pending 


RAISING CONCERNS, SUGGESTIONS AND ADDING OF REVIEW 


How to raise a concern, suggestion and how to add a review? 

In the upper part of the website, click the “Contact Page” >> fill out the 
short form with your Name, Phone Number, E-mail Address and your desired 
message >> click send message. In connection with the “Contact Page” you 
can also access the live chat support, click the floating icon >> fill out the form 


> click submit. 


Step 1.0 


Cjzave BBQ & GRILL 


Step 1.1 


Tell Us Something! 
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Step 1.2 


Send Message y 


Step 2.0 Step 2.1 


Please fill out the form below and we will get 


back to you as : don as possible. 


Tell Us Something! 


” Message 


J Add free live chat to your 


på o K: 


Step 2.2 


248 


OTHER WAYS TO CONTACT THE RESTAURANT 


HOW TO CONTACT THE RESTAURANT VIA E-MAIL, FACEBOOK, OR 


MOBILE NUMBER? To see the different contact details of the restaurant, scroll 


down >> look for Social Media and Contact Number. 


Step 1. 


Cjzave BBQ & GRILL 


kr i\ y m 
OW AVE I3 
KOREAN STYLE BURET 
i Scroll down your mouse 
to see the footer. 


Step 2. 


© Copyright @ By AMA BSIT Students | All Rights Reserved 
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LOG OUT 
To Log Out, go to the Profile icon located at the upper right corner of the 
website. Click the "Log out”. 


Step 1. 


Step 2. 


Cjzave BBQ & GRILL 


, 


(7; ve SN O 


ROR AN STYLE BUFFER 
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Admin’s Guide 


ACCESSING WEBSITE 
To access the admin portal, Go to your browser >> type the link 
https://cizave.com/admin/admin_login.php >> press enter and it will automatically 


direct you to the admin’s Log in page. 


Step 1. Step 2. 


Q https://cjzave.com/admin/admin_login.php - Google Search 


St e p 3 gn —— racevvur vien racevvur 
D 


Login Now 
Admin 


enter your username 


enter your password 
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LOG IN 
How to Login? To log in, simply fill out the needed information from the 
log in page >> click Login Now if done. 


Step 1. 


Login Now 
= Admin & F 


Login Now 


ADMINS ACCESS 
What are the different privileges an admin can do with their account? 
To access the overview of all features of the portal, the Admin should Log in first 
and a dashboard will reflect from the homepage of the portal which shows all the 
features of the website. 


Step 1. 


Home Products Pending Out Complete Users Messages 


Dashboard 


PhpO/- PhpO/- PhplOO/- 


welcome! 


Update Profile 


1 8 34 Å 
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EDITING PROFILE 
To Edit your Profile, click the Profile icon >> tap the Update Profile >> 


fill out the needed information and click Update Now. 


Step 1. 


Admin 


e Orders 


Step 2. 


Update Profile 


admin 


enter your old password 
enter your new password 


confirm your new passwon 


Update Now 
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ADDING/REMOVING OF PRODUCTS 

How to add/update/remove products? 

a. Add Products - To Add Products, Go to Products Page >> fill out the 
Add Products form with the needed information >> click Add Product. 

b. Update Products - To Update Products, go to Products Page >> click 
Update button on your desired product >> fill out the Update Product form and 
press Update. 

c. Remove Products - To Remove Products, go to Products Page >> 
click the Delete button on your desired product >> a display will flash on your 


screen "Delete this Product?” then press ok. 


Step 1.0 


Home Products Pending Out Complete Users Messages 


Dashboard 


welcome! 


Update Profile 


PhpO/- PhpO/- Php100/- 


34 7 
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Step 2.0 


Home Products Pending Out Complete Users Messages 


Add Product 


enter product pr | 
select category -- v 


[ Choose File | No file chosen 
Add Product 


Step 3.0 


Php250.00 Php250.00 


Available Php250.00 


Marinated Beef 500g Pork Gochujang 500g Pork Galbi 500g 


near thigh part of the beef either kasim or pique part either kasim or pique part 


Ree | update | 


Step 3.1 


Update Product 


Category 


Available ~] 


te Image 


Choose File | No file chosen 
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Step 4.0 


Available 


Marinated Beef 500g 


Pork Gochujang 500g Pork Galbi 500g 


near thigh part of the beef 


EXE d 


either kasim or pique part either kasim or pique part 


Cancel 


Php250.00 Available Php250.00 Available 
Marinated Beef 500g Pork Gochujang 500g Pork Galbi 500g 


near thigh part of the beef either kasim or pique part 


EB SE 


either kasim or pique part 


EB Ee 
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PROCESSING OF ORDERS 
How to process an order? 

a. Pending Orders - To access pending orders, go to Pending Page to view 
orders and start preparing the order. 

a.1 Update Preparing Order - To update Preparing Order, click the “v” 
arrow? >> click Out for Delivery once the order is prepared >> click Update. 
b. Out for Delivery - To access Out for Delivery orders, go to Out for Delivery 
page. 

b.1 Update Out for Delivery - To update Out for Delivery order, click the 
“vy” arrow >> click Delivered once the order is delivered to the customer >> click 
Update. 
c. Completed Orders - To access Completed Orders, go to Complete Order 


Page to view Complete/Delivered Orders. 


Step 1.0 


Home Products Pending Out Complete Users Messages 


Dashboard 


Php100/- 


welcome! — — PhpO/- PhpO/- 


| ll MI 
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Step 1.1 


Pending Orders 


Total Price ` Php100.00 


Special Instruction 


httpsv/cizave.com/admirvpendina.pha 


Step 1.1 


Your order is out for del ~ 


paring 


Your order is out for delivery! 


Step 2.0 


Admin Home Products Pending Out Complete Users 


Dashboard 


welcome! 
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Step 2.1 


Out For Delivery 


Step 2.1 


Your order is out for del v A 
Delivered 


Your order is out for delivery! 


Delivered Delete 


Step 3.0 


Home Products Pending Out 


Complete 


Dashboard 


welcome! 


See Orders See Users See Messages 
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Step 3.1 


Completed Orders 


USERS ACCOUNT 
To see all User’s Account, go to User’s Page and you will see here all 
the Registered Accounts of the customers in the Official Website with their 
User id and User name. 


Step 1. 
Home Products Pending Out Complete Users Messages 


Dashboard 


welcome! 


See Orders See Products See Users See Messages 
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Step 2. 


Username: Nicole Castro 


Username : Dana 


Username: Brian Dela Cruz 


User Id :56 User Id :57 User Id: 58 
Username : Charla Mae Username: Aldrin Reyes Username: Alyssa Bulan 
pees 
User Id :59 User Id : 60 User Id : 61 
Username Jennifer Username Marco Username : Nina Teodoro 
User ld : 62 User Id: 63 User Id : 64 
Username ` Sarah Aguirre Username : Joey Paradela Username: Joseph Alcana 


User Id :65 


User Id : 66 


Username : Mayvelyn Anotay 


User Id : 69 


Username: Ivan 8. Collantes 


CUSTOMERS MESSAGE 


There are two ways to access customer's messages; 

a. Contact Page - To access customer's message from the customer 
page form, go to Messages and all the message will display. 

b. Tawk.To Account - To access the live chat, Go to your browser >> 
type the link “https://dashboard.tawk.to/login” >> press enter and it will 
automatically direct you to the Tawk.To Account admin's Log in page. 

b1. TAWK.TO LOGIN - How to Login? To log in, simply fill out the 
needed information from the log in page >> click Login Now if done then the 
homepage of the Tawk.To Account will display. 

b2. VIEWING INBOX - Go to the Inbox icon >> move your cursor 
to Cjzave BBQ & GRILL navigation bar, then all the received messages from 


the users will display. 
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Step 2.5 


LOG OUT 
To Log out your account, click the Profile icon >> press Log out. 
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